JQuery динамически добавить в аккордеон - PullRequest
Новая
       12

JQuery динамически добавить в аккордеон

6 голосов
/ 03 мая 2011

Используя пример из jQuery UI , я попытался динамически добавить секцию к аккордеону (на основе this ), но я не могу заставить аккордеон правильно изменить размер.Новый раздел переполняет аккордеонный контейнер, и когда он щелкает, он сжимается в контейнер, скрывая содержимое раздела.Смотрите скрипка .

Как добавить раздел и изменить размер аккордеона? 

$(function() {
    $("#accordion").accordion({
        fillSpace: true
    });

    // I want to dynamically add sections to the accordion,
    // but it doesn't resize properly...
    $("#accordion")
                .append('<h3><a href="#">New Section</a></h3><div><p>hello world</p></div>')
                .accordion("destroy")
                .accordion({ fillSpace:true })
                .accordion("resize")
        ;

    $("#accordionResizer").resizable({
        minHeight: 140,
        resize: function() {
            $("#accordion").accordion("resize");
        }
    });
});

Ответы [ 3 ]

0 голосов
/ 03 мая 2011

Если вы удалите атрибут высоты на accordionResizer (height:220px), все будет работать как надо.Похоже, что выбранная вами высота слишком мала для содержимого - отсюда и переполнение.

Если вам нужно что-то другое, чем высота по умолчанию, чтобы соответствовать содержимому, попробуйте динамически назначать высоту accordionResizer каждый раз, когда вы добавляете новый раздел.

что-то вроде ... 

var height = $("#accordion h3").size() * $("#accordion h3:first").height() + 50;
      // add 50px to     allow room for the section contents.
$("#accordionResizer").height(height);
0 голосов
/ 27 января 2014

С вопросом и ответом все в порядке (так как вы все еще можете уничтожить и воссоздать аккордеон), но теперь с датой появления jQuery 1.10.0 добавлен новый метод refresh , который обрабатывает штраф за изменение размера. Учитывая новую версию jQuery, я бы сейчас написал код следующим образом: 

$(function() {
    // Add the following parameters otherwise the last entry
    // added to the accordion will be active after the refresh.
    //
    $("#accordion").accordion({
        collapsible: true, // Let's you squash all of the headings
        active: false // Defaults to having all of the headings squashed
    });

    // Now you can dynamically add to the accordion and refresh it.
    //
    $("#accordion")
            .append('<h3><a href="#">New Section</a></h3><div><p>hello world</p></div>')
            .accordion("refresh"); // A graceful recreation of the accordion.
});
0 голосов
/ 03 мая 2011

jQuery UI Accordion берет размер элемента с момента его вызова. Вам нужно вызвать какой-то метод обновления для него.

...