jQuery slideToggle一个div而不是独立地滑动所有的div

Question

我正在使用下面的函数来切换div，通过它，任何一个entry-content div都可以独立地打开或关闭。

很好的一点是，每次只有一个entry-content div会被打开。点击一个关闭的entry-title div会关闭其他所有的entry-content div，然后打开被点击的那个。我需要保留html标记，因为它是由WordPress动态创建的。这是否可能？ 函数：

jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
});

html

<div class="entry-post">

   <h2 class="entry-title">Post Title 1</h2>

   <div class="entry-content">Lorem Ipsum...

</div></div>

   <h2 class="entry-title">Post Title 2</h2>

   <div class="entry-content">Lorem Ipsum...

</div></div>

More of the same....

</div>

- markratledge

Answer 1

每次单击时，只需将它们全部关闭：

jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
    $(".entry-content").hide();
$(this).parent().children(".entry-content").slideToggle(500); });
});

例子: http://jsfiddle.net/auUxk/

- Derek

---

如果您切换已打开的内容，它将显示div而不是隐藏它，因为您之前已经将其隐藏。 - Marc

Answer 2

是的，您只需使用以下逻辑：

$(".entry-title").click(function() {
    // hide all entry title elements
    $('.entry-title').hide();
    // show the clicked one
    $(this).show();
});

你可以将其调整为使用toggle而不是hide/show。

通常我会通过给元素分配特殊的CSS类来执行此类逻辑（最好将事物分开）。因此，当我单击元素时，我会向其添加一个类。但是，当您单击另一个元素时，您将拥有具有该类的两个元素，但您只想要一个。因此，您必须对其进行修改。首先从所有具有该类的元素中删除该类，然后将其添加到单击的元素中。

$(".anyAffectedElement").click(function() {
    // remove any instances of special class
    $('.enabledElement').removeClass('eneabledElement');
    // add special class to clicked element 
    $(this).addClass('enabledElement');
});

^ 这只是一个处理类似问题的一般逻辑。在简单情况下，'enabledElement'类只会添加一些特殊的样式（比如高亮显示）。

- Damb

---

感谢您的解释；最终我选择了下面的答案来实现切换操作。 - markratledge

Answer 3

我不理解别人给出的那些例子，但最终我在另一个地方找到了答案，如果有人需要更简单（或不同）的解决方案：http://jsfiddle.net/bipen/zBdFQ/1/

@markratledge - 首先，您需要为您的divs提供id而不是类...

$("#link1").click(function(e) {
  e.preventDefault();
  $("#div1").slideDown(slow);
  $("#div2").slideUp(slow);
});

$("#link2").click(function(e) {
  e.preventDefault();
  $("#div1").slideUp(slow);
  $("#div2").slideDown(slow);
});

- Igor Laszlo