如何折叠其他导航项

Question

好吧，我到处搜索我的问题，没有看到类似的东西，也许我的研究能力很烂，这是很有可能的。不过，这是我的问题。

我有一个由 ul 和 li 组成的导航，另一个 ul 和 li 位于外层 li 的内部。

使用jquery，我可以点击外面的li来切换里面的ul。这允许我单独展开每个导航项。但是我希望在单击下一个时折叠上一个项目。我能想到的就是这个：

<script>

$(function(){

    $(".main-nav").on("click",function(){
        $(".main-nav").find(".inner-nav").hide();
        $(this).find(".inner-nav").toggle();
    });
});
</script>

然而，虽然这会折叠每个项目，但它不允许折叠当前项目。 html 的一部分在这里：

<div class="nav">
    <ul>
        <li class="main-nav">
            <div class="nav-icon" id="dashboard-icon"></div>
            <a href="#">Dashboard</a>   
            <ul class="inner-nav">
                <li><div class="inner-nav-icon" id="stats-icon"></div><a href="#">Statistics</a></li>
                <li><div class="inner-nav-icon" id="log-icon"></div><a href="#">Log</a></li>
            </ul>
        </li>
        <li class="main-nav">
            <div class="nav-icon" id="ticket-icon"></div>
            <a href="#">Support Tickets</a>
            <ul class="inner-nav">
                <li><div class="inner-nav-icon" id="browse-icon"></div><a href="#">Browse Active</a></li>
                <li><div class="inner-nav-icon" id="browse-icon"></div><a href="#">Browse Pending</a></li>
                <li><div class="inner-nav-icon" id="add-icon"></div><a href="#">Create A Ticket</a></li>
                <li><div class="inner-nav-icon" id="settings-nav-icon"></div><a href="#">Settings</a></li>
            </ul>       
        </li>

Answer 1

当您使用 toggle() 时，您可以简单地使用 .not()

$(function(){
    $(".main-nav").on("click",function(){
        $(".inner-nav").not($(this).find(".inner-nav")).hide();
        $(this).find(".inner-nav").toggle();
    });
});

Working Demo

如何折叠其他导航项

How to collapse other navigation items

html

css

navigation

jquery