切换 div if 语句答案

【问题标题】：toggle div if statement切换 div if 语句
【发布时间】：2011-12-11 04:29:21
【问题描述】：

我有这个 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 中切换类操作，但前提是之前切换到折叠。

【问题讨论】：

一方面，z-index=1000; 不是有效的 CSS；应该是：z-index: 1000;.

标签： javascript jquery toggleclass

【解决方案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() 可以很清楚你在做什么。

【讨论】：

我如何调用这个函数 onclick parent1 for parent2 $(#parent2).find(".action").toggleClass("collapse");不工作
我明白你在问什么，但这只会让它变得更加混乱。如果它是交替的，您可以通过两个 onclick 事件调用的一种方法来处理它。我知道 jQuery 的意图，但我认为功能有点高。如果你使用单一方法的方法（与一个公共变量如$("#exp2").is(":hidden")），你可以得到你需要的结果。
我做了这样的事情
那你准备好了吗？如果你是，那么答案是使用 jQuery 中元素的 .is(":hidden") 属性。

【解决方案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 类并对它或其子类执行任何操作
我们终于对点击的文章做任何事情

【讨论】：