使用jQuery添加和删除类

Question

我目前正尝试在标签（单击标签）后立即在UL上使用jQuery添加和删除类，但由于某种原因而无法使它正常工作。 任何帮助，将不胜感激，谢谢。 下面的代码段：

$(document).on("click", "a.navDropTrigger", function(){
    var $this = $(this);
    if ($this.hasClass("navDropHover")) {
        $this.closest(".navDrop").removeClass("navDropHover");  
    } 
    else {
        $this.next(".navDrop").addClass("navDropHover");
    }
});

<li><a class="navDropTrigger" href="#">Work</a>
    <ul class="navDrop">
    <li><a href="/work.php">Project Name</a></li>
    <li><a href="/work.php">Project Name</a></li>
    <li><a href="/work.php">Project Name Long</a></li>
    <li><a href="/work.php">Project Name This One Too</a></li>
    <li><a href="/work.php">Project Name</a></li>
    <li><a href="/work.php">Project Name</a></li>
    </ul>
</li>

Answer 1

第一个问题是您要从document而不是单击的链接中搜索。

更换：

 var $this = $(this);

与

var $this = $(e.target);

您还需要捕获事件对象才能起作用。

将e参数添加到匿名事件处理函数中，如下所示：

$(document).on("click", "a.navDropTrigger", function(e){

然后，您将使用单击的链接而不是整个文档。

这很重要，因为在此示例中显示了多个菜单后，您可以：

• 用<li>打开HTML，指示这是列表中类似的事情之一
• 正在尝试相对于某事进行搜索
• 使用类而不是ID

---

您正在尝试使用closest 。 请参阅文档 ：

对于集合中的每个元素，通过测试元素本身并在DOM树中遍历其祖先，获得与选择器匹配的第一个元素。

该列表是链接的下一个同级，而不是其祖先。 （它不是您从任何一个搜索的document对象的祖先）。

请改用next 。

您还需要始终使用它。 您必须在添加和删除该类的同一元素上测试该类是否存在。

---

 $(document).on("click", "a.navDropTrigger", function(e) { var $this = $(this); if ($this.next(".navDrop").hasClass("navDropHover")) { $this.next(".navDrop").removeClass("navDropHover"); } else { $this.next(".navDrop").addClass("navDropHover"); } }); 

 .navDrop { display: none; } .navDropHover { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a class="navDropTrigger" href="#">Work</a> <ul class="navDrop"> <li><a href="/work.php">Project Name</a></li> <li><a href="/work.php">Project Name</a></li> <li><a href="/work.php">Project Name Long</a></li> <li><a href="/work.php">Project Name This One Too</a></li> <li><a href="/work.php">Project Name</a></li> <li><a href="/work.php">Project Name</a></li> </ul> </li> <li><a class="navDropTrigger" href="#">Play</a> <ul class="navDrop"> <li><a href="/work.php">Project Name</a></li> <li><a href="/work.php">Project Name</a></li> <li><a href="/work.php">Project Name Long</a></li> <li><a href="/work.php">Project Name This One Too</a></li> <li><a href="/work.php">Project Name</a></li> <li><a href="/work.php">Project Name</a></li> </ul> </li> </ul> 

Answer 2

确保您正在搜索并检查正确的元素：

$(document).click(".navDropTrigger", function(e) {
    e.preventDefault();
    if ($(e.target).next(".navDrop").hasClass("navDropHover")) {
        $(e.target).next(".navDrop").removeClass("navDropHover");
    } else {
        $(e.target).next(".navDrop").addClass("navDropHover");
    }  
});

https://jsfiddle.net/3apb6qcq/1/