首页 文章

jQuery隐藏和显示折叠多个div

提问于
浏览 次
0

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

我默认需要一个活动，然后当我点击其他链接显示另一个div时，我需要隐藏活动div，依此类推 . 因此，在一个给定时间只打开一个div .

我已经将一个演示放在一起以显示我需要的东西，我已经让它工作了，但是我需要它来点击另一个链接后折叠/隐藏活动div .

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

jquery toggle show-hide collapse

3 回答

  • 3

    你需要在你想要隐藏的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/（使用更少的代码完成）

    回复于
  • 1

    尝试这样的事情：

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

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

    Demo: 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");
    });
});

    Demo: http://codebins.com/bin/4ldqp84

    回复于

相关问题