Question

我有这个jQuery切换，将一个div的显示交换为另一个。现在，如果我点击link1（显示div.shows），然后移开它，然后再打开，我再也不能点击它（或我的主页按钮），除非我点击link2（div.depts）。我在CSS中弄乱了什么，或者我在jQuery中错误地设置了我的真/假状态？

这是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")＆amp;＆amp; $(".deptLinks")

在您的 Javascript 中，我的主页链接或任何引用链接都没有div ...... homeLink是孤立的。

Answer 2

我认为我的问题在于元素。当div向下滑动以隐藏时，该元素仍然显示为table-cell而不是display：none。

要解决此问题，我只是将以下链接添加到我的if / else语句中：

$("div.link1/link2 ul").css("display","none/table-cell");

感谢您的参与！

切换显示状态奇怪

2 个答案: