Question

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

HTML：

.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;
  }

CSS

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

});

Jquery的

<SinglCmp>
  <PostCmp></PostCmp>
  <ShareCmp></ShareCmp>
  <CommentCmp></CommentCmp>
</SinglCmp>

实施例..

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

您可以在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 4

您必须选择未单击的标题的内容部分并将其向上滑动。类似的东西：

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

});

展开并折叠div

5 个答案: