1

我有一个侧边栏列表，我正在响应地变成一个简单的下拉手风琴按钮。问题是，当您将窗口调整为较小时，打开然后关闭列表，然后将窗口调整为较大。该列表不会以“桌面”形式重新出现。

演示：http: //iamalecschmidt.com/newblog/

我正在使用一些简单的 Javascript 来切换菜单以将侧边栏切换到菜单：

的HTML：

<aside class="left-sidebar">

    <p class="intro">Hey! I’m Alec.</p>
    <p class="bio">
        I <a href="#">design</a> interfaces for websites & apps, I also 
        <a href="#">cook</a> and I am an aspiring front-end 
        <a href="#">developer</a>.
    </p>

    <div class="leftNavWrap">

        <ul class="leftNav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <a class="topicsButton" href="#">Topics &nbsp;<span>&#9660;</span></a>
        <a class="dribbbleIcon" href="#">Dribbble</a> 
        <a class="twitterIcon" href="#">Twitter</a>
    </div>
</aside>

JAVASCRIPT：

<script type="text/javascript"> // responsive menu
jQuery(document).ready(function($){

    /* prepend menu icon */
    $('p.bio').append('<div id="menu-button"><p>Menu</p></div>');

    /* toggle nav */
    $("#menu-button").on("click", function(){
        $('div.leftNavWrap').slideToggle();
        $(this).toggleClass("active");
    });

});
</script>
4

2 回答 2

2

slideToggle将切换元素的样式设置为display:none关闭时（http://api.jquery.com/slideToggle/），因此当您将大小调整回“桌面”时，该元素将保持隐藏状态。

您需要检查宽度何时扩展超过“桌面”断点并确保它可见，或使用另一种显示/隐藏方法，例如切换类并使用 css 转换应用动画。

于 2012-12-07T04:09:13.263 回答
0

我发现了问题。。

当您在顶部打开菜单并最大化时，它将起作用。当您关闭菜单并最大化您的窗口时，就会出现问题。

仍然离开NavWrap的显示是无..

如果您需要更多帮助，请在您显示和隐藏顶部菜单和侧边栏的位置显示您的代码...

于 2012-12-07T04:06:27.793 回答