jQuery slideToggle()发行

Question

我正在开发一个具有移动和桌面版本的导航。布局很好，而且大部分功能都在工作，但是我对slideToggle()有一个问题。

例如，当屏幕低于768时，就会出现导航展开按钮，然后单击安莉按钮，切换主导航以关闭移动导航。当我调整窗口的大小，点击主导航继续切换，即使它是768以上。

如有任何帮助，我们将不胜感激:)

<nav>
    <ul class="mobileNav">
        <li>Expand</li>
    </ul>
    <ul class="mainNav">
        <li class="">Item1</li>
        <li class="">Item2</li>
        <li class="">Item3</li>
        <li class="">Item4</li>
    </ul>   
</nav>

jQuery

$(document).ready(function() {
    var expand = $('.mobileNav li');
    menu = $('.mainNav');

    $(expand).click(function () {
        var width = $(window).width();

        if (width < 768) {
            menu.slideToggle();

            $('.mainNav li').click(function() {
                menu.slideUp();
            });         
        }
    });     
});

Answer 1

这里有两个问题。

1. 不应在另一个单击事件处理程序上注册单击事件，它将使单击事件处理程序多次执行。
2. 您没有检查第二次单击处理程序中的宽度。

试一试

$(document).ready(function() {
    var expand = $('.mobileNav li');
    menu = $('.mainNav');

    $(expand).click(function () {
        var width = $(window).width();
        if (width < 768) {
            menu.slideToggle();
        }
    });     
    $('.mainNav li').click(function() {
        if (width < 768) {
            menu.slideUp();
        }
    });         
});

Answer 2

您需要另一个事件来调整窗口大小。

$(window).resize(function() {
   var width = $(window).width();
   if (width > 768) {
       menu.show();
   }
});

Answer 3

添加以下css以切换div

width:100%!important;

原因:当没有宽度定义时，slideToggle将使宽度和高度变为0，并显示:无

而扩展模式则相反，宽度将增加到父div的宽度，内容正在扩展，并且该位置的高度超过了最后阶段所需的高度。

当最终宽度达到100%时，高度将重置为所需的高度。