javascript - 为什么我的 click() 函数仅适用于调整大小?
问题描述
我快疯了。正如您在下面的代码片段中看到的 - 一切正常。但不在我的项目中。在我的项目中,仅适用于 resize() 中的代码。当我调整窗口大小时 - 好的,很好,我可以通过单击项目添加和删除“打开”类。但是如果我刷新页面而不调整窗口大小 - 我不能添加类。不能什么都不做。我在这件事上花了几个小时。有人可以帮助我吗?为什么它不起作用?
(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 百万次,它总是很好。
解决方案
它在代码片段中起作用但在您的代码中不起作用的原因是因为 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>
推荐阅读
- c# - 为 KairosDB api 创建 Json
- angular - 无法从 Angular 中的订阅方法中获取数据
- laravel - 仅显示可见的项目和组,其中组有项目
- android - 以编程方式支持不同类型的屏幕
- python - python:使用 Oracle 的 wallet/tnsnames 连接到 Oracle 数据库
- python - TypeError:无法腌制 MplCanvas 对象
- php - 未捕获的 PDOException:SQLSTATE[HY093]:无效的参数号:未定义参数
- linux - 如何将 MacOS CouchDB 数据移动到 Linux?
- android - 连接 ROOM 数据库中的表
- sapui5 - 如何隐藏 sap.m.Table 上的列?