Question

我使用jquery来切换一个名为＆＃34; active＆＃34;的类。在我的页面中显示我的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>

toggle类jQuery

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

jQuery 确实按预期工作，但是说我的页面上有2行以上，当我点击页面上的任何锚点时，它会添加＆＃34;活动＆＃34;每个名为＆＃34; dropdownContain＆＃34;在我的页面上。

我如何只添加＆＃34;活跃＆＃34;到点击锚点的相应div？我可能有100多行需要此代码，因此我无法为每个元素提供唯一的类或ID。

谢谢你的时间！

Answer 1

您需要使用this专门引用您点击的链接：

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

＆＃13;

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

＆＃13;

.active {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用以下next()方法。

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

仅在锚点击单个div时切换类

2 个答案: