Javascript 通过jQuery基于浏览器宽度（调整大小）在cilck上切换类

我有一个按钮与切换类连接到它-它应该只在borwser大小低于1200px时工作。它在刷新后工作，但不知何故，当我调整窗口大小时，它有时工作，有时不工作-看不到模式。我在开发工具上看到元素高亮显示（所以脚本正在做一些事情），但我没有切换类。尝试将其更改为addClass/removeClass，但结果相同。任何建议如何使它工作将不胜感激

代码笔：

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>

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

jQuery:

<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>

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

$（文档）.ready（函数（）{
函数setNav（）{
如果（窗宽小于1200）{
$（'.btn'）。在({
单击：函数（）{
$（this）.children（'.level-2'）.toggleClass（'open'）；
}
});
}
}
setNav（）
$（窗口）。调整大小（函数（）{
setNav（）；
console.log（window.outerWidth）；
});
});

代码的问题是，您绑定了很多事件处理程序：每次窗口

调整大小

事件发生时，每个

标记（不仅仅是级别1中的标记）都会得到一个新标记。因此，如果

toggleClass（）

实际切换或不切换，它取决于事件处理程序的数量

我只会绑定一个处理程序，最好在文档上结合一个选择器，该选择器只标识

标记，直接位于

.level-1

下方，并要求在该处理程序中输入屏幕大小。你甚至不需要一个

调整大小
处理程序

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

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

编辑2：添加了
resize（）
的示例，如果窗口变大，则重置
打开
类
感谢您的快速响应。不幸的是，这不是解决办法。我给了“li”元素一个特殊的类名，因此事件处理程序只绑定到它，它仍然以相同的（不可预测的）方式进行反应-有时切换，有时不切换。我不知道你的意思。我把代码放到JSFIDLE中，它对我来说就像一个符咒。你怎么会出错？嗨，约阿希姆。看看我录制的这段视频，它解释了一切。对我来说，它的行为很奇怪——但这远远超出了我对jQuery的了解。似乎$（window）.resize（）在这里是一个问题-您刚才说还有另一种方法。你能给我一个如何避免这种行为的提示吗？我非常感激。不过，非常感谢您的时间。您是否仍然使用
.resize（）
来设置事件处理程序？这将是一个问题。我将在我的回答中添加一个关于
resize（）
的示例，以使我的意思更清楚。嗨，Joachim，非常感谢您的帮助。我会按照你的建议解决这个问题——做得很好。