jQuery slideToggle（）问题

我正在开发一个具有移动版和桌面版的导航。布局很好，大部分功能正常，但我对

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>

扩展


第1项
第2项
第3项
第4项

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

$（文档）.ready（函数（）{
var expand=$（'.mobileNav li'）；
菜单=$（'.mainNav'）；
$（展开）。单击（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
menu.slideToggle（）；
$（'.mainNav li'）。单击（函数（）{
menu.slideUp（）；
});         
}
});     
});

这里有两个问题

您不应该在另一个click事件处理程序上注册click事件，它将使click事件处理程序执行多次

您没有检查第二个单击处理程序内的宽度

试一试

$（文档）.ready（函数（）{
var expand=$（'.mobileNav li'）；
菜单=$（'.mainNav'）；
$（展开）。单击（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
menu.slideToggle（）；
}
});     
$（'.mainNav li'）。单击（函数（）{
如果（宽度<768）{
menu.slideUp（）；
}
});         
});

这里有两个问题

您不应该在另一个click事件处理程序上注册click事件，它将使click事件处理程序执行多次

您没有检查第二个单击处理程序内的宽度

试一试

$（文档）.ready（函数（）{
var expand=$（'.mobileNav li'）；
菜单=$（'.mainNav'）；
$（展开）。单击（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
menu.slideToggle（）；
}
});     
$（'.mainNav li'）。单击（函数（）{
如果（宽度<768）{
menu.slideUp（）；
}
});         
});

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

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

---

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

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

---

添加以下

css

以切换div

width:100%!important;

原因：当没有宽度定义时，滑动切换将使宽度和高度为0，并显示：无

扩展模式，它也会这样做，宽度将增加到父div宽度，内容正在扩展，该位置的高度超过最后阶段所需的高度

---

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

添加以下

css

以切换div

width:100%!important;

原因：当没有宽度定义时，滑动切换将使宽度和高度为0，并显示：无

扩展模式，它也会这样做，宽度将增加到父div宽度，内容正在扩展，该位置的高度超过最后阶段所需的高度

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