为什么我的 click() 函数仅适用于调整大小？

Question

我快疯了。正如您在下面的代码片段中看到的那样 - 一切正常。但不在我的项目中。在我的项目中，仅在 resize() 中运行代码。当我调整 window 大小时 - 好的，很好，我可以通过单击项目来添加和删除 class 'open'。但是，如果我刷新页面而不调整大小 window - 我无法添加 class。什么也做不了。我在这件事上花了几个小时。有人可以帮我吗？为什么它不起作用？

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

.open {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="main-menu">
  <li class="nav-item">
     <span class="nav-link">Menu item 1</span>
  </li>
  <li class="nav-item">
     <span class="nav-link">Menu item 2</span>
     <ul class="dropdown-menu">
        <li class="dropdown-item">
           <span>Menu item 2 subitem 1</span>
        </li>
        <li class="dropdown-item">
           <span>Menu item 2 subitem 2</span>
        </li>
     </ul>
  </li>
  <li class="nav-item">
     <span class="nav-link">Menu item 3</span>
     <ul class="dropdown-menu">
        <li class="dropdown-item">
           <span>Menu item 3 subitem 1</span>
        </li>
        <li class="dropdown-item">
           <span>Menu item 3 subitem 2</span>
        </li>
     </ul>
  </li>
</ul>

我使用 Drupal 8 CMS（如果它很重要 - 但我使用 jQuery、click() 和 Drupal 数百万次并且总是很好。

Answer 1

它在代码段中起作用但在您的代码中不起作用的原因是因为 SO 代码段自动将 jQuery 逻辑放在 document.ready 事件处理程序中，这确保 DOM 已加载在代码运行之前。

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

要解决此问题，请将 IIFE 替换为 document.ready 处理程序：

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

.open {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="main-menu">
  <li class="nav-item">
    <span class="nav-link">Menu item 1</span>
  </li>
  <li class="nav-item">
    <span class="nav-link">Menu item 2</span>
    <ul class="dropdown-menu">
      <li class="dropdown-item">
        <span>Menu item 2 subitem 1</span>
      </li>
      <li class="dropdown-item">
        <span>Menu item 2 subitem 2</span>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <span class="nav-link">Menu item 3</span>
    <ul class="dropdown-menu">
      <li class="dropdown-item">
        <span>Menu item 3 subitem 1</span>
      </li>
      <li class="dropdown-item">
        <span>Menu item 3 subitem 2</span>
      </li>
    </ul>
  </li>
</ul>

Answer 2

我在互联网上又搜索了几个小时，找到了 Drupal.behaviours 的解决方案...我不知道它是如何工作的，为什么会工作，为什么在这个项目中这个简单的 jQuery 代码（从下面和我的 post，它是一样的）没有用，但在另一个 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);

我添加了这段代码：

(function ($) {
Drupal.behaviors.navclick = {
    attach: function (context, settings) {
      $('.nav-item', context).click(function () {
        $(this).toggleClass('open').siblings().removeClass('open');
      });
    }
  };
})(jQuery);

现在它可以工作了，调整 window 的大小，并且在启动页面之后（以前它在启动页面时不起作用）。为什么？我不知道。

为什么我的 click() 函数仅适用于调整大小？

Why is my click() function working only on resize?

html

javascript

jquery

drupal

onclick