jquery - 切换显示状态奇怪

Question

我有这个 jQuery 开关，可以将一个 div 的显示与另一个交换。现在，如果我单击 link1(显示 div.shows)，然后离开它，然后再打开，我将无法再次单击它(或我的主页按钮)，除非我单击 link2 (div.depts)。我是不是在我的 CSS 中弄乱了某些东西，还是我在我的 jQuery 中错误地设置了我的 true/false 状态？

这是 jQuery:

var displayShow = false;
var displayDept = false;
var containerHeight = 130;
$(".showLinks").click(function() {
    if (displayDept) {
        toggleDisplay(".depts",0,0);
        displayDept = false;
        console.log("displayDept: " + displayDept);
    }
    if (displayShow) {
        toggleDisplay(".shows",0,0);
        displayShow = false;
        console.log("displayShow: " + displayShow);
    } else {
        toggleDisplay(".shows",1,containerHeight);
        displayShow = true;
        console.log("displayShow: " + displayShow);
    }
});
$(".deptLinks").click(function() {
    if (displayShow) {
        toggleDisplay(".shows",0,0);
        displayShow = false;
        console.log("displayShow: " + displayShow);
    }
    if (displayDept) {
        toggleDisplay(".depts",0,0);
        displayDept = false;
        console.log("displayDept: " + displayDept);
    } else {
        toggleDisplay(".depts",1,containerHeight);
        displayDept = true;
        console.log("displayDept: " + displayDept);
    }
});
function toggleDisplay(divClass,divOpacity,divHeight) {
    $(divClass).animate({
        opacity: divOpacity,
        height: divHeight
    });
}

其余的可以在这里找到: http://jsfiddle.net/jawa9000/xn8WB/1/

Answer 1

看起来这可能是罪魁祸首:

<div class="homeLink">
<a href="#">Home</a>
</div>
    <div class="showLinks">Links1</div>
    <div class="deptLinks">Links2</div>

您的目标是:

$(".showLinks") &&$(".deptLinks")

在您的 Javascript 中，我碰巧没有看到您的主页 链接的任何 div 或任何引用 对他们来说...homeLink 是孤立的。