如何实现多实例下拉菜单仅同时展开一个？附现有jQuery代码

嗨，我来帮你搞定这个同一时间只展开一个下拉菜单的需求～你的原代码只处理了当前菜单的切换，但没考虑关闭其他已经展开的菜单，咱们调整一下逻辑就能实现啦：

修改后的jQuery代码 #

$(".dropdown-tree-a").click(function () {
    // 先关闭所有已经展开的下拉菜单
    $('.dropdown-tree.open-tree').removeClass("open-tree active");
    
    var $parent = $(this).parent('.dropdown-tree');
    // 判断当前菜单是否已经展开
    if ($parent.hasClass('open-tree')) {
        $parent.removeClass("open-tree active");
    } else {
        $parent.addClass("open-tree active");
    }
});

完整的代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li class="dropdown-tree">
        <a class="dropdown-tree-a">
            下拉菜单1 <span class="badge pull-right">3</span>
        </a>
        <!-- 这里放你的下拉内容 -->
        <div class="dropdown-tree-content">
            菜单内容1
        </div>
    </li>
    <li class="dropdown-tree">
        <a class="dropdown-tree-a">
            下拉菜单2 <span class="badge pull-right">5</span>
        </a>
        <div class="dropdown-tree-content">
            菜单内容2
        </div>
    </li>
</ul>

<script>
$(".dropdown-tree-a").click(function () {
    $('.dropdown-tree.open-tree').removeClass("open-tree active");
    var $parent = $(this).parent('.dropdown-tree');
    if ($parent.hasClass('open-tree')) {
        $parent.removeClass("open-tree active");
    } else {
        $parent.addClass("open-tree active");
    }
});
</script>

逻辑说明 #

• 每次点击下拉触发时，先找到所有带有open-tree类的下拉菜单容器，移除它们的open-tree和active类，这样其他展开的菜单就会关闭。
• 然后单独处理当前点击的菜单：如果它已经是展开状态，就关闭；如果是收起状态，就展开它。

这样就能保证同一时间只有一个下拉菜单处于展开状态啦～

内容的提问来源于stack exchange，提问作者calin24