javascript - 通过 jQuery 根据浏览器宽度(调整大小)切换类 onclick

Question

我有一个带有切换类的按钮 - 它应该只在浏览器大小低于 1200 像素时工作。它在刷新后工作，但不知何故，当我调整窗口大小时，它有时工作，有时不工作 - 看不到模式。我在开发工具上看到该元素被突出显示(因此 hte 脚本正在做某事)但我没有切换类。试图将其更改为 addClass/removeClass 但结果是一样的。任何有关如何使其发挥作用的建议都将不胜感激。

代码笔:http://codepen.io/miunik/pen/oLWOLY

HTML:

<ul class="level-1">
  <li class="btn">1 level item
    <ul class="level-2">
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
      <li>2 level item</li>
    </ul>
  </li>
</ul>

CSS

ul.level-2 {
  display: none;
}

ul.level-2.open {
  display: block;
}

jQuery:

$(document).ready(function() {
  function setNav() {
    if (window.outerWidth < 1200) {
      $('.btn').on({
        click: function() {
          $(this).children('.level-2').toggleClass('open');
        }
      });
    }
  }
  setNav()
  $(window).resize(function() {
    setNav();
    console.log(window.outerWidth);
  });
});

Answer 1

您的代码的问题是，您绑定(bind)了很多事件处理程序:每次窗口 resize事件发生，每个 <li>标签(不仅是级别 1 中的标签)得到一个新标签。所以这取决于事件处理程序的数量，如果 toggleClass()实际上切换或不切换。

我只会绑定(bind)一个处理程序，最好是在文档中与一个仅标识 <li> 的选择器结合使用正下方标签 .level-1并在此处理程序中询问屏幕尺寸。你甚至不需要 resize处理程序。

$(document).ready(function() {
  $(document).on("click", ".btn", function () {
    if (window.outerWidth < 1200) {
      $(this).children('.level-2').toggleClass('open');
    }
  });
});

请在此处查看工作示例:https://jsfiddle.net/wu1unvek/

您可能想要一个 resize()处理程序无论如何都要删除 open如果窗口变大则类:

$(window).resize(function () {
  if (window.outerWidth >= 1200) {
    $(".level-2").removeClass("open");
  }
});

编辑:适应修改后的问题代码:使用.btn而不是 .level-1 > li

编辑 2:为 resize() 添加示例重置 open如果窗口变大则类