jQuery隐藏和显示折叠多个div

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

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

我已经把一个演示放在一起，以显示我所需要的，我已经让它工作，可以说，但我需要它折叠/隐藏活动div一旦另一个链接被点击

---

您需要在要隐藏的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：

---

更新的JSFiddle：（用更少的代码完成）

您需要向要隐藏的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：

---

更新的JSFIDLE：（用更少的代码完成）

尝试以下方法：

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

---

试着这样做：

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

---

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

演示：

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>

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

---

演示：

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

演示：

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>

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

---

演示：

是否可以获得一个指向默认框的链接，以及类似于演示的链接。。。链接？？？@Paul-最简单的方法是将链接添加到默认框并在开始时隐藏它。然后，在另一个框显示后，此链接将变为可见。是否可以获得指向默认框的链接，以及类似于显示的链接。。。链接？？？@Paul-最简单的方法是将链接添加到默认框并在开始时隐藏它。然后，在另一个框显示后，此链接将变为可见