仅当单击单个div的锚点时切换类

Question

我使用jquery在页面中切换一个名为"active"的类以显示我的div。

这是我的HTML:

  <td>
    <nav id="dropdown">
        <ul>
            <li class="drop">
                <a href="#">More <i class="fa fa-chevron-down"></i></a>
                <div class="dropdownContain"><!-- active -->
                    <div class="triangle"></div>
                      <ul>
                        <li>Plan</li>
                        <li>Account Settings</li>
                        <li>Switch Account</li>
                        <li>Sign Out</li>
                      </ul>
                  </div>                                                            
             </li>
        </ul>
   </nav>
 </td>

和切换类jQuery

<script type="text/javascript">
    $( document ).ready(function() {
        $(".drop a").click(function(){
            $( "div.dropdownContain" ).toggleClass( "active" );
            e.preventDefault();
        });
    });
</script>

jQuery确实按预期运行，但假设我的页面上有2行以上，当我单击页面上的任何锚点时，它会将"active"添加到页面上每个名为"dropdownContain"的div中。

如何仅将"活动"添加到单击锚点的相应div？我可能有100多行需要这个代码，因此我不能为每个元素都有唯一的类或id。

谢谢你抽出时间！

Answer 1

您需要使用this来具体引用您正在单击的链接：

$(".drop a").click(function(){
    $(this).next("div.dropdownContain").toggleClass( "active" );
    e.preventDefault();
});

$(".drop a").click(function() {
  $(this).next("div.dropdownContain").toggleClass("active");
  e.preventDefault();
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="dropdown">
  <ul>
    <li class="drop">
      <a href="#">More <i class="fa fa-chevron-down"></i></a>
      <div class="dropdownContain">
        <!-- active -->
        <div class="triangle"></div>
        <ul>
          <li>Plan</li>
          <li>Account Settings</li>
          <li>Switch Account</li>
          <li>Sign Out</li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<nav id="dropdown">
  <ul>
    <li class="drop">
      <a href="#">More <i class="fa fa-chevron-down"></i></a>
      <div class="dropdownContain">
        <!-- active -->
        <div class="triangle"></div>
        <ul>
          <li>Plan</li>
          <li>Account Settings</li>
          <li>Switch Account</li>
          <li>Sign Out</li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Answer 2

您可以使用next()方法，如下所示。

$(".drop a").click(function(){
    $(this).next("div.dropdownContain").toggleClass( "active" );
    e.preventDefault();
});