Question

我多次使用此下拉列表并且只想打开一个（当我点击关闭时其他的）：

＆＃13;

$(".dropdown-tree-a").click(function () { 
     if($(this).parents().hasClass('open-tree'))
     {
         $(this).parent().removeClass("open-tree")
     }
     $(this).parent('.dropdown-tree').toggleClass("open-tree active"); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="dropdown-tree">
       <a class="dropdown-tree-a"> <span class="badge pull-right">42</span> WOMEN COLLECTION </a>
       <ul class="category-level-2 dropdown-menu-tree">
           <li><a href="sub-category.html"> Shirt </a></li>
           <li><a href="sub-category.html"> Fragrances </a></li>
           <li><a href="sub-category.html">Scarf </a></li>
           <li><a href="sub-category.html">Sandal </a></li>
           <li><a href="sub-category.html">Winter Collection </a></li>
           <li><a href="sub-category.html">Men Accessories </a></li>
       </ul>
    </li>

＆＃13;

点击＆＃34;。dropdown-tree-a＆＃34;当前下拉列表已打开但其他人不会关闭（删除班级开放树）

有人可以告诉我我做错了吗？。

先谢谢

Answer 1

这是最简单的＆amp;简单的解决方案

＆＃13;

   jQuery(".dropdown-tree-a").click(function (e) {                     
                    e.preventDefault();
    
       jQuery(".dropdown-tree").removeClass("open-tree active"); 
       /** FIRST REMOVE CLASSES FROM ALL ELEMENTS **/
       jQuery(this).parents('.dropdown-tree').addClass("open-tree active"); 
       /** IN NEXT STEP FIND PARENT item with class '.dropdown-tree' and then add classes 'open-tree active'. USe Css to display child items **/
    });

＆＃13;

li.dropdown-tree ul.dropdown-menu-tree{
  display:none;
}

li.dropdown-tree.open-tree.active ul.dropdown-menu-tree{
  display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-tree">
   <a href="#" class="dropdown-tree-a"> <span class="badge pull-right">42</span> WOMEN COLLECTION </a>
   <ul class="category-level-2 dropdown-menu-tree">
       <li><a href="sub-category.html"> Shirt </a></li>
       <li><a href="sub-category.html"> Fragrances </a></li>
       <li><a href="sub-category.html">Scarf </a></li>
       <li><a href="sub-category.html">Sandal </a></li>
       <li><a href="sub-category.html">Winter Collection </a></li>
       <li><a href="sub-category.html">Men Accessories </a></li>
   </ul>
</li>

<li class="dropdown-tree">
   <a  href="#" class="dropdown-tree-a"> <span class="badge pull-right">42</span> WOMEN COLLECTION </a>
   <ul class="category-level-2 dropdown-menu-tree">
       <li><a href="sub-category.html"> Shirt </a></li>
       <li><a href="sub-category.html"> Fragrances </a></li>
       <li><a href="sub-category.html">Scarf </a></li>
       <li><a href="sub-category.html">Sandal </a></li>
       <li><a href="sub-category.html">Winter Collection </a></li>
       <li><a href="sub-category.html">Men Accessories </a></li>
   </ul>
</li>

＆＃13;

下拉列表一次只打开一个

1 个答案: