通过 jQuery 根据浏览器宽度（调整大小）切换 Class onclick

Question

我有一个带有切换按钮 class 的按钮 - 只有当浏览器大小低于 1200 像素时，它才能工作。它在刷新后工作，但不知何故，当我调整 window 的大小时，它有时工作，有时不工作 - 看不到模式。我在开发工具上看到元素被高亮显示（所以 hte 脚本正在做某事）但我没有切换 class。试图将其更改为 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

你的代码的问题是，你绑定了很多事件处理程序：每次 window resize 事件发生时，每个 <li> 标签（不仅是级别 1) 得到一个新的。因此，如果 toggleClass() 实际切换或不切换，则取决于事件处理程序的数量。

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

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

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

如果 window 变大，您可能想要一个 resize() 处理程序来删除 open class：

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

编辑：适应修改后的问题代码：使用.btn代替.level-1 > li

编辑 2：添加了 resize() 重置 open class 的示例，如果 window 变大了

通过 jQuery 根据浏览器宽度（调整大小）切换 Class onclick

Toggle Class on cilck based on browser width (resize) via jQuery

javascript

jquery

html

css

toggleclass