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

如何折叠其他导航项目

1 个答案: