Javascript jQuery一次显示/隐藏一个div

我稍微修改了本文中的代码，以便在我的页面上显示/隐藏div的列表

我仍在学习jQuery，并试图找出如何修改代码，以便在打开一个div时，它将关闭任何其他打开的div

非常感谢你的帮助。这是我的代码块：

    function setScroll(){
    var slideHeight = 80;
    $(".container").each(function() {
    var $this = $(this);
    var $wrap = $this.children(".wrap");
    var defHeight = $wrap.height();
    if (defHeight >= slideHeight) {
        var $readMore = $this.find(".heading");
        $wrap.css("height", slideHeight + "px");
        $readMore.append("<div id='clickButton' class='expand-div'>Click for More Info</div>");
         $readMore.children("#clickButton").bind("click", function(event) {    
            var curHeight = $wrap.height();      
            if (curHeight == slideHeight) {
                $wrap.animate({
                    height: defHeight
                }, "normal");                
                $(this).removeClass("expand-div").addClass("collapse-div");
                $(this).text("Close");
                $wrap.children(".gradient").fadeOut();          
            } else {
                $wrap.animate({
                    height: slideHeight
                }, "normal");
                $(this).removeClass("collapse-div").addClass("expand-div");
                $(this).text("Click for More Info");
                $wrap.children(".gradient").fadeIn();
            }
            return false;
        });
    }
});
}

函数setScroll（）{
var SlidehHeight=80；
$（“.container”）.each（函数（）{
var$this=$（this）；
var$wrap=$this.children（“.wrap”）；
var defHeight=$wrap.height（）；
如果（定义高度>=滑块高度）{
var$readMore=$this.find（“.heading”）；
$wrap.css（“高度”，滑动高度+px”）；
$readMore.append（“单击以获取更多信息”）；
$readMore.children（#clickButton”）.bind（$click），函数（事件）{
var curHeight=$wrap.height（）；
如果（curHeight==滑块高度）{
$wrap.animate({
高度：除雾高度
}“正常”）；
$（this.removeClass（“expand div”）.addClass（“collapse div”）；
$（此）.text（“关闭”）；
$wrap.children（“.gradient”）.fadeOut（）；
}否则{
$wrap.animate({
高度：滑块高度
}“正常”）；
$（this.removeClass（“collapse div”）.addClass（“expand div”）；
$（此）.text（“单击以获取更多信息”）；
$wrap.children（“.gradient”）.fadeIn（）；
}
返回false；
});
}
});
}

首先关闭所有div，无论它们是打开的还是关闭的。 然后只需打开所需的div。

简单示例（）演示了如何关闭全部并打开一个

var divs = $('div.highlander').hide();
var which = divs.length;
$('#cycler').click(function () {
    which += 1;
    if (which >= divs.length) {
        which = 0;
    }
    divs.hide();
    divs.eq(which).show();
});

---

罗伊的回答很好。我有另一个你可以做的例子。更一般一点，可能更容易理解

show1
展示2
展示3
展示4
1.
2.
3.
4.
var divs=$（“div”）
$（“按钮”）。单击（函数（）{
divs.hide（）；
$（“div.”+$（this.attr（“class”）.show（）；
});

您可以将其上传到jsfiddle.net，以便我们也可以测试完整的代码吗？您尝试过做什么@RoseannSolano：我试图实现@Farhan在下面提出的建议，但我无法理解确切的语法。我需要遍历所有的div并将其折叠，但我不太清楚如何折叠。这是我想做的-但我很难找到如何折叠的方法。我是jQuery的新手（并且仍然在学习很多javascript），所以我希望论坛能给我一些帮助。

    <button class="show1">show1</button>
    <button class="show2">show2</button>
    <button class="show3">show3</button>
    <button class="show4">show4</button>
    <div class="show1">1</div>
    <div class="show2">2</div>
    <div class="show3">3</div>
    <div class="show4">4</div>

     var divs = $("div")
     $('button').click(function () {
         divs.hide();
         $("div." +  $(this).attr("class")).show();
     });