切换div状态不会对自助点击起作用

Question

我想要的是：在点击时显示/隐藏关联的div之间有一个div切换。这将包括如果我点击一个链接，然后重新点击相同的链接，它应该切换状态。

我在使用什么

function toggleVisibility(newSection) {
    $(".section").not("#" + newSection).hide();
    $("#" + newSection).show();
}

<div id="navigation">
    <ul id="navbar">
        <li><a id="home" class="active" href="#"><span></span>Home</a></li>
        <li><a id="depot" onclick="toggleVisibility('depots_panel');" href="#"><span></span>Depot</a></li>
        <li><a id="reports" onclick="toggleVisibility('reports_panel');"><span></span>Reports</a></li>
        <li><a id="admin"><span></span>Admin</a></li>   
        <li><a id="logout" href="#" onclick="logOut();"><span ></span>Log Out</a></li>
    </ul>

目前，当我在链接之间点击时，div会在彼此之间切换，但我尝试过的任何内容似乎都是在自我点击时进行链接切换。它可能很简单，我只是看不到它。任何帮助都会非常感激！

Answer 1

你可以这样做吗？

function toggleVisibility(newSection) {
    $(".section").hide();
    $(".section#" + newSection).show();
}

或类似的东西：

function toggleVisibility(newSection) {
    $(".section").hide(0, function() {
        $(".section#" + newSection).show();
    });
}

Answer 2

您可以使用http://api.jquery.com/toggle/方法

function toggleVisibility(newSection) {
    $("#" + newSection).toggle();
}