jQuery .slideToggle，显示：无 [英] jQuery .slideToggle, display:none

问题描述

我有一个逻辑问题。我有一个CSS下拉菜单，当浏览器或手机的宽度小于690pixles时，就会变成仅显示在切换器上的菜单。即用户需要按下按钮来显示菜单。然而，一个逻辑问题是，如果您调整浏览器大小，请打开菜单，然后再次关闭并将浏览器调整为全宽，正常菜单消失，因为slideToggle添加了display：none;风格的div元素 - 这会导致布局问题，并不是非常人性化。任何想法如何解决？

I have a logic problem. I have a CSS drop down menu, which when the browser, or mobile phone, width is less that 690pixles becomes a menu that is only displayed on a toggle. I.e. the user needs to press a button to display the menu. However, a logic problem is that if you resize the broswer, toggle the menu to open, then close it again and resize the browser to full width the normal menu disappears because slideToggle adds the display:none; style to the div element - which then causes a layout problem and is not very user friendly. Any ideas how to fix?

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() {});
});

推荐答案

您可以显示它并将其隐藏在窗口大小调整上，以确保菜单始终在大屏幕中可见，并且在小屏幕中不可见。

You could show it and hide it on window resize, so that you make sure the menu is always visible in big screens and not visible in small screens.

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

这篇关于jQuery .slideToggle，显示：无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！