切换导航

Question

我试图切换打开的导航项目（见解，广告系列等），如果另一个打开则关闭。当一个部分打开，并且用户单击另一个部分时，现有的打开部分应该关闭。一次只能打开一个部分。给定以下HTML结构：

<li> <a href="#/insights" class="open_div"><i class="fa fa-dashboard"></i><span class="hidden-sm">Insights</span></a>
<ul>
            <li class="desc_div"><a class="submenu" href="#/insights/query"><i class="fa fa-eye"></i><span class="hidden-sm">Power Query</span></a>
            </li>
            <li class="desc_div"><a class="submenu" href="#/insights/dashboards"><i class="fa fa-eye"></i><span class="hidden-sm">Dashboards</span></a>
            </li>
        </ul>
    </li>
    <li> <a class="dropmenu open_div" href="#campaigns"><i class="fa fa-bars"></i><span class="hidden-sm">Campaigns</span></a>

        <ul>
            <li class="desc_div"><a class="submenu" href="#/campaigns/orders"><i class="fa fa-eye"></i><span class="hidden-sm">Orders</span></a>
            </li>
            <li class="desc_div"><a class="submenu" href="#/campaigns/assets"><i class="fa fa-eye"></i><span class="hidden-sm">Assets</span></a>
            </li>
        </ul>
    </li>
    <li> <a class="dropmenu" href="#inventory"><i class="fa fa-archive"></i><span class="hidden-sm">Inventory</span></a>

        <ul>
            <li><a class="submenu" href="#/inventory/properties"><i class="fa fa-eye"></i><span class="hidden-sm">Properties</span></a>
            </li>
            <li><a class="submenu" href="#/inventory/targeting"><i class="fa fa-eye"></i><span class="hidden-sm">Targeting Groups</span></a>
            </li>
        </ul>
    </li>
    <li> <a href="#/accounts"><i class="fa fa-users"></i><span class="hidden-sm">Accounts</span></a>

        <ul>
            <li><a class="submenu" href="#/accounts/advertisers"><i class="fa fa-eye"></i><span class="hidden-sm">Advertisers</span></a>
            </li>
            <li><a class="submenu" href="#/accounts/publishers"><i class="fa fa-eye"></i><span class="hidden-sm">Publishers</span></a>
            </li>
            <li><a class="submenu" href="#/accounts/users"><i class="fa fa-eye"></i><span class="hidden-sm">Users</span></a>
            </li>
        </ul>
    </li>
    <li> <a class="dropmenu" href="#/administration"><i class="fa fa-cogs"></i><span class="hidden-sm">Administration</span></a>

        <ul>
            <li><a class="submenu" href="#/administration/user_roles"><i class="fa fa-eye"></i><span class="hidden-sm">User Roles</span></a>
            </li>
            <li><a class="submenu" href="#/administration/ad_types"><i class="fa fa-eye"></i><span class="hidden-sm">Ad Types</span></a>
            </li>
            <li><a class="submenu" href="#/administration/product_types"><i class="fa fa-eye"></i><span class="hidden-sm">Product Types</span></a>
            </li>
            <li><a class="submenu" href="#/administration/rate_types"><i class="fa fa-eye"></i><span class="hidden-sm">Rate Types</span></a>
            </li>
            <li><a class="submenu" href="#/administration/industry_verticals"><i class="fa fa-eye"></i><span class="hidden-sm">Industry Verticals</span></a>
            </li>
        </ul>
    </li>

和jQuery：

$(document).ready(function(){
$(".open_div").click(function(){
    $(".desc_div").toggle();
    $(this).next(".desc_div").slideToggle("slow").siblings('.desc_div').slideUp();
  });
    })

Answer 1

尝试这样的事情：

$(document).ready(function(){
    $(".open_div").click(function(){
        $(".desc_div:visible").toggle();
        $(this).next(".desc_div").slideToggle("slow").siblings('.desc_div').slideUp();
    });
})