Уничтожение аккордеона jQuery UI не работает

Я столкнулся с проблемой удаления виджета аккордеона, когда размер окна превышает заданное значение.

Я использую jQuery 1.8.3 и пользовательский интерфейс jQuery 1.9.2.

Это мой код:

/*
* Detect browser size and add accordian on page (at load) if necessary
*/
$(document).ready(function() {
    var window_width = $(window).width();  
    if (window_width <= 767){
        $("div.innernav ul.menu").accordion({ 
            header: '.separator',
            animated: 'slide',
            event: "click",
            heightStyle: "content",
            icons: { "header": false, "headerSelected": false } ,
            collapsible: true, 
            active: false,
        });
    }
});
/*
* Detect browser size on resize and add/remove accordian
*/
$(window).resize(function() {
    var wi = $(window).width();
    if (wi <= 767){
        $("div.innernav ul.menu").accordion({ 
            header: '.separator',
            animated: 'slide',
            event: "click",
            heightStyle: "content",
            icons: { "header": false, "headerSelected": false } ,
            collapsible: true, 
            active: false,
        });
    } else if (wi >= 768){
        $("div.innernav ul.menu").accordion("destroy");
    }
});

Код работает, и мой аккордеон активен только тогда, когда ширина окна меньше 768 пикселей, но я получаю:

Error: cannot call methods on accordion prior to initialisation; attempted to call method 'destroy'

Кажется, эта ошибка приводит к тому, что другой код, который у меня есть на странице, не работает, поэтому я мог удалить эту ошибку. Я новичок в javascript/jQuery, поэтому буду очень благодарен за помощь.

Большое спасибо!


jquery jquery-ui destroy jquery-ui-accordion
person mousebat    schedule 11.01.2013    source источник
comment
Я так понимаю, он пытается уничтожить аккордеон при каждом изменении размера окна, хотя он уже уничтожен? Так что, может быть, вы хотите проверить его существование, прежде чем убить его...} else if (wi >= 768 && $("div.innernav ul.menu .ui-accordion").length){? (Я думаю, что $("div.innernav ul.menu .ui-accordion") будет подходящим селектором для получения аккордеона, созданного $("div.innernav ul.menu").accordion(...).)   -  person Jeromy French    schedule 11.01.2013

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте превратить готовую функцию в отдельную функцию.

В остальной части:

$("div.innernav ul.menu").empty();

Затем просто заполните меню ul так же, как и функцию готовности.

person greendave11    schedule 11.01.2013
comment
Спасибо, Дэйв. Это действительно опустошило бы мой UL! Однако мне нужно, чтобы контент оставался там, где он есть. В конце концов я переписал функции с помощью этого вопроса о переполнении стека: ">ссылка - person mousebat; 11.01.2013

arrow_upward
1
arrow_downward

В конце концов я переписал функции, используя оператор if, чтобы проверить, действительно ли виджет активен для элемента: Проверить, доступен ли виджет перед запуском функции Jquery

Вот готовый код:

$(window).load(function(){
    var element = $('div.innernav ul.menu');
    if($(window).width() < 768){
        element.accordion({ header: '.separator', animated: 'slide', event: "click", heightStyle: "content", icons: { "header": false, "headerSelected": false }, collapsible: true, active: false});
    } 
    else {
        element.accordion = false;
    }
    $(window).resize(function(){
        if($(window).width() > 767) {
            element.find('.item').removeAttr('style');
            if(element.accordion) {
                element.accordion('destroy');
                element.accordion = false;
            }
        } 
        else {
            element = $('div.innernav ul.menu');
            element.accordion({ header: '.separator', animated: 'slide', event: "click", heightStyle: "content", icons: { "header": false, "headerSelected": false }, collapsible: true, active: false});
        }
    });
});
person mousebat    schedule 11.01.2013