jquery - 切换 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

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

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

Answer 2

相反，你可以这样做吗？

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

或类似的东西：

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