Jquery 如何折叠其他导航项

好吧，我到处寻找我的问题，但没有发现任何类似的，也许我的研究技能很差，这是很有可能的。然而，这是我的问题

我有一个由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>

$（函数（）{
$（“.main nav”）。在（“单击”，函数（）{
$（“.main nav”）.find（“.inner nav”）.hide（）；
$（this.find（“.inner nav”）.toggle（）；
});
});

但是，虽然这确实会折叠每个项目，但不允许折叠当前项目。 下面是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>

当您使用

切换（）

时，只需使用

.not（）

使用

toggle（）

时，只需使用

.not（）

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