jQuery addClass 定位正确的元素 - 但有时只应用类

jQuery addClass targeting correct element - but only applying class sometimes

本文关键字：应用 元素 定位 addClass jQuery      更新时间：2023-09-26

对于上下文 - 我目前正在开发一个非常基本的Rails应用程序，该应用程序旨在根据输入到表单中的参数吐出HTML模板。但是，我目前遇到了一个非常奇怪的问题。我正在使用 Bootstrap 3，并且有一个包含下拉子菜单的导航 - 因为 Bootstrap 从 Bootstrap 3 中删除了此功能，所以我不得不从这里借用代码来让它工作。

在JSFiddle中，它工作得很好，所以创建一个没有意义;事实上，在我的静态信息页面上，它工作得很好。在每隔一页上，它大约 10% 的时间工作，通常是在刷新后直接工作，其余时间没有响应。我已经检查了Firebug中发生的事情，并且正在针对正确的元素(Firebug通过以黄色突出显示来显示(，但并不总是向其添加"open"类。

我完全不知所措。这是引导程序的事情吗？轨道的事情？为什么它有时有效？！

编辑 - 这是有问题的jQuery。真的非常基本。

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    event.preventDefault(); 
    event.stopPropagation(); 
    $(this).parent().toggleClass('open');
});

好的，这可能需要多次尝试，因为我无法测试更改。

$('ul.dropdown-menu [data-toggle=dropdown]') 是一个 jquery 选择器，用于选择[data-toggle=dropdown]元素，这些元素是具有类 dropdown-menu 的ul元素的子元素。

这最终不会选择任何内容，因为类dropdown-menu没有ul元素。

我认为您想要以下内容：

$('.dropdown-toggle[data-toggle=dropdown]').on('click', function(event) {
    event.preventDefault(); 
    event.stopPropagation(); 
    $(this).parent().toggleClass('open');
    //alert('clicked');
    //console.log('clicked');
});

通知：
- 没有<ul>标签。您可以使用<a>标签，但这不是必需的。
- 类和[data-toggle]之间没有空格，因为它们是同一个元素。

要对其进行测试，您可以取消注释警报或控制台日志行。如果它正常工作，它应该在每次单击时提醒您一次，以更改菜单状态。

测试选择器
您可能会发现有用的方法是在浏览器控制台中使用jquery选择器。打开控制台并发送命令，例如 $('.dropdow-toggle') .它将显示该选择器选择的所有元素。你可以通过这种方式根除很多问题。

相关文章：