Question

我正在开发具有移动版和桌面版的导航。布局很好，大多数情况下功能正常，但我遇到slideToggle()的问题。

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

感谢任何帮助：）

HTML

<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

这里有两个问题。

您不应该在另一个点击事件处理程序上注册click事件，它会使click事件处理程序多次执行
您没有检查第二次点击处理程序中的宽度

尝试

$(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会将width和height设为0并显示：none

和扩展模式，反之亦然，宽度将增加到父级宽度，内容正在扩大，并且该位置的高度超过最终阶段所需的高度

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

jQuery slideToggle（）问题

3 个答案: