Question

我有一个下拉列表，问题是，当我尝试一个接一个地打开一个列表时，第一个仍然是未闭合的。如何在打开另一个列表时关闭一个列表

$(document).ready(function() {
    $('.dropdown-submenu a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
    <p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i>&nbsp;CATEGORY</p>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

您不能将toggle用于多种手风琴菜单样式。

我已经为您的手风琴设计更新了您的HTML设计。在您的文件中添加以下代码。

<强> CSS

.closed{display:none;}
.opened{display:block;}

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
    <p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i>&nbsp;CATEGORY</p>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu opened">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu opened">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu closed">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu closed">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<强>的jQuery

$(function(){

    $('.dropdown-submenu a.test').on("click", function(e){  

        var ul = $(this).next('ul');
        if(ul.hasClass('opened')){
            ul.removeClass('opened').addClass('closed');
        }else{
            ul.addClass('opened').removeClass('closed');
        }
        if($(this).parents('ul').length == 1){
            $(this).parents('ul').find('ul').not(ul).addClass('closed').removeClass('opened')
        }

        e.stopPropagation();
        e.preventDefault();
    });

});

演示：https://jsfiddle.net/zsyajqt8/10/

多个下降同时出现

1 个答案: