0

我正在开发具有移动和桌面版本的导航。布局很好，大部分功能都在工作，但我遇到了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();
            });         
        }
    });     
});
4

3 回答 3

2

这里有两个问题。

  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();
        }
    });         
});
于 2013-06-04T00:41:50.097 回答
1

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

$(window).resize(function() {
   var width = $(window).width();
   if (width > 768) {
       menu.show();
   }
});
于 2013-06-04T00:48:34.310 回答
1

添加以下内容css以切换 div

width:100%!important;

原因：虽然没有定义宽度，但 slideToggle 会将宽度和高度设为 0 并显示：无

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

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

于 2014-10-30T10:11:29.463 回答