Question

我目前正尝试在标签后立即使用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。请参阅documentation：

对于集合中的每个元素，通过测试元素本身并遍历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/

添加＆amp;使用jQuery删除类

2 个答案: