Question

我找到了一些非常有用的答案来帮助我使用java来扩展和折叠内容，但现在我无法弄清楚如何让它一次只扩展一个...所以当一个div扩展时，如果单击以展开另一个，它会折叠第一个。有任何想法吗？这是小提琴和代码。请帮忙！

HTML：

<div class="container">
        <div class="header">
            <span>Expand</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>

<div class="container">
    <div class="header"><span>Expand</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>

CSS：

.container .content {
    display: none;
    padding : 5px;
}

脚本：

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

Answer 1

尝试

var $contents = $(".content")
var $headers = $(".header").click(function () {

    var $header = $(this);
    //getting the next element
    var $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.stop(true, true).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";
        });
    });

    $headers.not($header).text("Expand");
    $contents.not($content).stop(true, true).slideUp();
});

演示：Fiddle

Answer 2

看看http://getbootstrap.com/2.3.2/javascript.html#collapse你会看到手风琴菜单的一个很好的例子。您可以通过使用Bootstrap和Bootstrap javascript文件来实现它。或者你可以深入研究他们的代码，看看他们是如何做到的。我建议弄清楚他们是如何做的，这样你就可以根据需要进行调整。仅仅因为它的Bootstrap并不意味着它的最佳方式。

一次展开/折叠一个内容

2 个答案: