Question

我稍微修改了这篇文章jQuery div content partial hide, show all中的代码，以显示/隐藏我页面上的div列表。

我还在学习jQuery，并试图找出如何修改代码，这样当我打开一个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;
        });
    }
});
}

Answer 1

简单示例（jsfiddle）演示关闭所有并打开一个。

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

Answer 2

罗伊的回答很好。我有另一个你可以做的事情的例子。更一般，更容易理解。 http://jsfiddle.net/sFR6Q/2/

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

Answer 3

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

jQuery一次显示/隐藏一个div

3 个答案: