Развернуть / свернуть содержимое только по одному

0

Я нашел несколько полезных ответов, которые помогут мне использовать java для расширения и сглаживания содержимого, но теперь я не могу понять, как сделать его только расширяющимся по одному... Так что, когда один div будет расширен, если вы нажмете на разверните еще один, он разрушит первый. Есть идеи? Вот скрипка и код. Пожалуйста помоги!

http://jsfiddle.net/eK8X5/248/

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";
            });
        });
});
  • 3
    java! = javascript так удалил его
Теги:

2 ответа

0

Взгляните на http://getbootstrap.com/2.3.2/javascript.html#collapse. Вы увидите отличный пример меню аккордеона. Вы можете реализовать его, просто используя Bootstrap и файл javascript Bootstrap. Или вы можете вникнуть в свой код и посмотреть, как они это делают. Я бы посоветовал выяснить, как они это делают, чтобы вы могли приспособить его по мере необходимости. Просто потому, что его Bootstrap не означает его лучший способ сделать это.

0

Пытаться

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

Демо: скрипка

Ещё вопросы

Сообщество Overcoder
Наверх
Меню