jQuery .slideToggle，display：none

Question

我有一个逻辑问题。我有一个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() {});
});

Answer 1

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

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