我有这个 HTML:
<div id="parent1" class="article">
<div class="action"></div>
<div id="exp1" class="expand"></div>
</div>
<div id="parent2" class="article">
<div class="action"></div>
<div id="exp2" class="expand"></div>
</div>
和CSS:
.article:hover .action {
z-index:1000;
}
.expand {
display: none;
}
action {
background: url(../images/down.png) 0 0 no-repeat;
z-index: -999;
}
.collapse {
background: url(../images/up.png) 0 0 no-repeat !important;
z-index: 1000;
}
和 JavaScript:
$(".article").click(function() {
$(this).find(".action").toggleClass("collapse"); // works onclick div article
????????? // when press parent1 if parent2 pressed before ???????.find(".action").toggleClass("collapse");
$("#exp2").hide(); // if previously open
$("#exp1").toggle(300);
}
现在我需要 jQuery 来实现 onclick Parent1 到 Parent2 中的 SwitchClass 操作,但前提是之前已切换为折叠。
最佳答案
有多种方法可以做到这一点。通常我会存储一个保存下拉状态( bool 值)的局部变量并检查它。
使用 jQuery,由于您已经在使用 hide(),因此可以使用:
if ($("#exp2").is(":hidden")) {
// Show content, set arrow to up.
$("#exp2").removeClass("expand").addClass("collapse");
}
else {
// Hide content, set arrow to down.
$("#exp2").removeClass("collapse").addClass("expand");
}
如果您只是添加和删除一个类,那么切换会更有意义。在这里你是轮流上课。使用addClass()和removeClass()可以让你非常清楚你在做什么。
关于javascript - 切换 div if 语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8461968/