jQuery隐藏和显示折叠多个div答案

【问题标题】：jQuery hide and show collapse multiple divsjQuery隐藏和显示折叠多个div
【发布时间】：2012-08-17 18:00:21
【问题描述】：

我需要能够在页面上隐藏和显示 div。

默认情况下我需要一个活动的，然后当我单击其他链接以显示另一个 div 时，我需要隐藏活动的 div，依此类推。所以在一个给定的时间只有一个 div 是打开的。

我已经制作了一个演示来展示我的需求，可以说我已经让它工作了，但是一旦点击另一个链接，我需要它来折叠/隐藏活动的 div。

http://jsfiddle.net/QFfzs/3/

【问题讨论】：

标签： jquery toggle show-hide collapse

【解决方案1】：

您需要向您要隐藏的 div 添加一个类，然后在像这样切换之前隐藏所有 div：

//adding '.hideMe' to the divs to be toggled
$(document).ready(function() {
    $('#hideDetailsDiv').hide();
    $('a#hideDetailsButton').click(function() {
        if (!$('#hideDetailsDiv').is(':visible')) {
            $('.hideMe').hide(400);
        }
        $('#hideDetailsDiv').toggle(400);
    });
});

JSFiddle：http://jsfiddle.net/QFfzs/4/

更新的 JSFiddle：http://jsfiddle.net/QFfzs/5/（用更少的代码完成）

【讨论】：

是否可以将链接返回到默认框以及类似于显示...链接？？
@Paul - 最简单的方法是将链接添加到该默认框并在开始时将其隐藏。然后在另一个框显示此链接后将变为可见

【解决方案2】：

试试这样的：

$('.primaryButton2').click(function(){
   $('.hideDetailsDiv').hide();//hide all divs, add to them class .hideDetailsDiv
   $(this).nextAll('.hideDetailsDiv:first').show(400);
})

【讨论】：

【解决方案3】：

在这里，我已经为上述问题完成了完整的 bin。你可以查看演示链接....

演示： http://codebins.com/bin/4ldqp84

HTML

<div id="panel">
  <a href="#">
    Show Default
  </a>
  <div class="box">
    <p>
      Default Div Box is already Active..!
    </p>
  </div>
  <a href="#">
    Show Box1
  </a>
  <div class="box">
    <p>
      Showing Div Box 1..!
    </p>
  </div>

  <a href="#">
    Show Box2
  </a>
  <div class="box">
    <p>
      Showing Div Box 2..!
    </p>
  </div>
  <a href="#">
    Show Box3
  </a>
  <div class="box">
    <p>
      Showing Div Box 3..!
    </p>
  </div>
  <a href="#">
    Show Box4
  </a>
  <div class="box">
    <p>
      Showing Div Box 4..!
    </p>
  </div>
</div>

CSS

.box{
  border:1px solid #334478;
  width:400px;
  height:50px;
  background:#f7a8a5;
  margin-top:3px;
  /* Default All Divs Are Hidden*/
  display:none;
}
#panel a{
  display:block;
  font-size:13px;
}
.box p{
  text-align:center;
}

jQuery

$(function() {
    //Show Default First div is Active
    $("#panel .box:first").show();
    $("#panel a").click(function() {
        $("#panel .box").hide(400);
        $(this).next(".box").show("slow");
    });
});

演示： http://codebins.com/bin/4ldqp84

【讨论】：