jQuery .slideToggle，显示：无

Question

我有一个逻辑问题。 我有一个CSS下拉菜单，当浏览器或移动电话的宽度小于690pixles时，它将变为仅在切换开关上显示的菜单。 即，用户需要按下按钮以显示菜单。 但是，逻辑上的问题是，如果您调整浏览器的大小，请切换菜单以将其打开，然后再次将其关闭，然后将浏览器的大小重新调整为全宽，则普通菜单会消失，因为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();
   }
});