展开和折叠 div

Question

展开和折叠功能目前工作正常，但我想修改功能，所以当我点击Expand 1，然后点击Expand 2，Expand 1 应该会自动折叠。这意味着一次只允许展开一个div，而其他所有应保持折叠状态。

HTML：

<div class="container">
<div class="header"><span>Expand 1</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

 <div class="header"><span>Expand 2</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

CSS

.container {
width:100%;
border:1px solid #d3d3d3;
 }
.container div {
 width:100%;
 }
.container .header {
 background-color:#d3d3d3;
 padding: 2px;
 cursor: pointer;
 font-weight: bold;
 }
 .container .content {
 display: none;
 padding : 5px;
  }

jQuery

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});

});

例子..

http://jsfiddle.net/eK8X5/8290/

Answer 1

你可以的，

$(".header").click(function () {
    $header = $(this);
    $content = $header.next();
    $(".content").not($content).slideUp().prev().text("Expand");
    $content.slideToggle(500, function () {
        $header.text(function () {
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Fiddle

• 全部折叠，当前的除外使用代码$(".content").not($content).slideUp().prev().text("Expand");

Answer 2

首先你需要折叠其他已经展开的。 我更新了 jsfiddle，它现在正在工作。 jsfiddle 试试这个：

$(".header").click(function () {

CollapseAll(this);    

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});

});

function CollapseAll(obj){
$(".header").each(function(i, item){
    var that = $(this);
    if($(this).next().is(":visible") && this != obj){
        $(this).next().slideToggle(500, function () {
            //execute this after slideToggle is done
            //change text of header based on visibility of content div
            that.text(function () {
            //change text based on condition
            return that.next().is(":visible") ? "Collapse" : "Expand";
            });
        });
    }
});
}

Answer 3

您必须选择未点击的标题的内容部分并将它们向上滑动。比如：

$(".header").click(function () {
    $header = $(this);
     //getting the next element
     $content = $header.next();
     //toggle other content area slides
    var notClicked =  $('.header').not(this).next().slideUp(500);
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
         //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
             return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });
});

Answer 4

您可以在您的 JS 代码中添加这两行来达到预期的效果。

$contents = $(".header").not(this).next();
$contents.filter(":visible").slideUp(500).prev().text("Expand");

那么完整的JS代码

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

    // Get all content panels and Hide them
    $contents = $(".header").not(this).next();
    $contents.filter(":visible").slideUp(500).prev().text("Expand");

});

我们的想法是选择所有header 元素，不包括this 单击的标题，如果它们可见则隐藏它们。

希望这会有所帮助。

Answer 5

您可以将其添加到点击代码的末尾。它折叠所有兄弟姐妹，然后在折叠后执行您的文本检查。

Fiddle

$header.siblings(".header").each(function(index,obj){
    header = $(obj);
    content = header.next();
    content.slideUp(500, function(){
        header.text(function () {
            return content.is(":visible") ? "Collapse" : "Expand";
        });             
    });

});