Question

我有这个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 for onclick parent1 to parent2中的toggleClass动作，但前提是切换为崩溃。

Answer 1

有很多方法可以做到这一点。通常我会存储一个保存下拉状态的局部变量（布尔值），然后检查一下。

使用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（）可以非常清楚你在做什么。

Answer 2

我在这里猜测，但我想你要关闭任何打开的.article并打开你点击的那个。

$(".article").click(function() {
   // see explanations 1 and 2 below
   $('.article.active').removeClass('active').find('#exp1').hide();

   // see explanation 3 below
   $(this).addClass('active').find('#exp2').show();
}

您可以更改代码以满足您的需要但是您理解它：

当我们点击.article时，我们会查找具有特定类的任何其他.article（在我的示例中为.active）。从技术上讲，可能只有.article.active
我们删除了.active类并对其执行任何操作
我们最终对所点击的文章做了什么

切换div if语句

2 个答案: