аккордеон jquery свернут по умолчанию при загрузке страницы

Я использую аккордеон jQuery UI на своей странице. У меня есть следующий код Javascript на моей загрузке страницы:

$(function() {
    $("#accordion").accordion({
            active: false,
            autoHeight: false,
            navigation: true,
            collapsible: true
        });

});

при загрузке страницы все вкладки открыты в течение нескольких секунд, а затем крах. Может быть своим влиянием нагрузки. Как я могу сделать аккордеон jQuery UI свернутым при загрузке страницы. Пожалуйста, предложите

6
javascript jquery jquery-ui

6 ответов

хотя и не прямой ответ, Возможно, вы можете сделать его скрытым, а затем показать его при его создании:

$("#accordion").accordion({
   active: false,            
   autoHeight: false,            
   navigation: true,            
   collapsible: true,
   create: function(event, ui) { $("#accordion").show(); }
});

обновление: эта скрипка работает для меня:http://jsfiddle.net/47aSC/6/

10

для меня это работает:

$(function() {
    $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: true,
            active: false

        });
});
9

вероятно, он медленно загружает что-то в конце страницы. Если вы не можете это исправить, вы можете попробовать объявить элемент, имеющий display:none применяется к нему в css, затем:

$("#accordion").show().accordion({
        active: false,
        autoHeight: false,
        navigation: true,
        collapsible: true
    });

может быть более чистый способ сделать это (как предлагает @Mrchief), но я не думаю .accordion() форматирует скрытые элементы красиво. Тебе придется проверить.

3

лучшее решение:

открыть jquery.пользовательский интерфейс.аккордеон.js и редактировать строки 29 и 31 (кстати, я использую 1.10.4).

изменить строку 29 на активный: 100, Изменить строку 31 на складной: правда,

таким образом, вам не нужно писать какой-либо скрипт или функцию в заголовке страницы. Установив активный на большое число (например, 100) вы говорите, что 100-й тег h3 активен (что в основном не существовать.)

на складной: true говорит, что все открытые теги h3 являются складными.

Это полностью решает проблему.

1
$(document).ready(function() {
   $('.collapse').collapse({
     toggle: false
   });
});

Это все .collapse классы в DOM для закрытия, но только после завершения загрузки DOM.

1

/ / мы также можем использовать приведенный ниже код для сворачивания аккордеона при загрузке страницы, и он должен использоваться, когда мы используем bootstrap 2.0

    $(document).ready(function () {
          if ($("#accordianId").length>0) {
                        $("#accordianId").trigger("click");
                    }
             });

другие мудрые, мы должны использовать ниже код для Bootstrap 3.0

$( "#accordianId" ).accordion( "option", "active", 0 );
0