jQuery .slideToggle,display:none

时间:2014-02-16 22:05:33

标签: javascript jquery html css

我有一个逻辑问题。我有一个CSS下拉菜单,当浏览器或手机的宽度小于690pixles成为仅显示在切换上的菜单时。即用户需要按一个按钮才能显示菜单。但是,一个逻辑问题是,如果你调整broswer的大小,切换菜单打开,然后再次关闭它并将浏览器的大小调整为全宽,正常菜单消失,因为slideToggle添加了display:none; div元素的样式 - 然后导致布局问题,并且不是非常用户友好。任何想法如何解决?

HTML:

<div id="primary-menu" class="drop-down">
    <div class="menu-toggle">menu-toggle</div>
    <ul id="responsive" class="menu">
        <li class="menu-item"><a href="#">Link 1</a></li>      
        <li class="menu-item"><a href="#">Link 2</a>
            <ul class="child-menu">
                <li class="menu-item"><a href="#">Link A</a></li>
                <li class="menu-item"><a href="#">Link B</a></li>
                <li class="menu-item"><a href="#">Link C</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="#">Link 3</a></li>
    </ul>
</div>

jQuery的:

$(".menu-toggle").click(function(){
    $("#responsive").slideToggle( "slow", function() {});
});

1 个答案:

答案 0 :(得分:0)

您可以在窗口调整大小时显示它并隐藏它,这样您就可以确保菜单始终在大屏幕中可见而在小屏幕中不可见。

$( window ).resize(function() {
    if($( window ).width() >= 690) {
        $("#responsive").show();
    }
    else {
        $("#responsive").hide();
   }
});