Javascript 为什么我的click（）函数只用于调整大小？

我快疯了。正如您在下面的代码片段中所看到的，一切都很好。但不是在我的项目中。在我的项目中，仅在resize（）中使用代码。当我调整窗口大小时——好的，这很好，我可以通过点击项目来添加和删除类“open”。但若我刷新页面而不调整窗口大小，我就不能添加类。什么也做不了。我花了几个小时在这件事上。有人能帮我吗？为什么不起作用

（函数（$）{
$（'.nav item'）。在（'click'，function（）上{
$（this.toggleClass（'open'）；
$（this.sides（）.removeClass（'open'）；
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<1200）{
$（'.nav item'）。在（'click'，function（）上{
$（this.toggleClass（'open'）；
$（this.sides（）.removeClass（'open'）；
});
}
});
})（jQuery）
。打开{
颜色：红色；
}



菜单项1


菜单项2


菜单项2子项1


菜单项2子项2




菜单项3


菜单项3子项1


菜单项3子项2



它在代码段中工作而不是在代码中工作的原因是，SO代码段自动将jQuery逻辑放置在
文档中。ready
事件处理程序可确保在代码运行之前加载DOM

但是，您的代码是在一个而不是document.ready事件处理程序中运行的，因此您尝试将事件绑定到尚不存在的元素。直到
resize
事件发生，事件才会被绑定并开始工作

要修复此问题，请使用document.ready处理程序替换IIFE：


jQuery（函数（$）{
$（'.nav item'）。在（'click'，function（）上{
$（this.toggleClass（'open'）.sides（）.removeClass（'open'）；
});
})
。打开{
颜色：红色；
}



菜单项1


菜单项2


菜单项2子项1


菜单项2子项2




菜单项3


菜单项3子项1


菜单项3子项2



我在互联网上又搜索了几个小时，找到了Drupal的解决方案。行为。。。我不知道它是如何工作的以及为什么工作的，为什么在这个项目中这个简单的jQuery代码（从下面和我的帖子中都是一样的）不工作，但是在另一个Drupal项目中工作得很好。。。我不知道。也许有人能告诉我。我不知道

版本包括：

jQuery(function($) {
  ...
});

而不是：

(function ($) {
  ...
})(jQuery);

也没用

所以我删除了我所有的代码：

(function ($) {
  $('.nav-item').on('click', function() {
    $(this).toggleClass('open');
    $(this).siblings().removeClass('open');
  });

  $(window).resize(function() {
    if($(window).width() < 1200) {
      $('.nav-item').on('click', function() {
        $(this).toggleClass('open');
        $(this).siblings().removeClass('open');
      });
    }
  });
})(jQuery);

现在它可以工作了，可以调整窗口大小，也可以在启动页面后工作（以前，它不能只启动页面）。为什么？我不知道。
您是否在项目中动态添加
.nav items
元素？顺便说一句，在另一个事件处理程序中添加事件处理程序通常不是一个好主意。每次调整窗口大小时，您都会添加额外的单击处理程序。@Barmar“动态”是什么意思？该网站是在Drupal CMS上，代码是一个菜单，但我简化了它（剪切链接）。我可以在管理面板中添加项目，代码是生成的，不是死板的HTML代码。我的意思是在页面加载后添加它们，例如使用AJAX。@Barmar，所以不，我不会动态添加
。nav items
。很抱歉，但您的解决方案对我不起作用：（这是在Drupal CMS上，可能是一个原因…？但我使用jQuery的方式：
（函数（$）{…}（jQuery））
100万次了，一切都很好。在HTML的开头或结尾，哪里有JavaScript？@Barmar结尾。请看下面我的答案，我想我找到了解决方案。
(function ($) {
Drupal.behaviors.navclick = {
    attach: function (context, settings) {
      $('.nav-item', context).click(function () {
        $(this).toggleClass('open').siblings().removeClass('open');
      });
    }
  };
})(jQuery);