2013-01-11 2 views
0

Я ударил проблему, удалив виджет аккордеона, когда окно изменилось выше заданного значения.jQuery UI accordion destroy not working

Я использую 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"); 
    } 
}); 

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

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

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

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

+0

Я получаю смысл это пытаясь уничтожить аккордеон с каждой сменой размера окна, хотя он уже уничтожен? Поэтому, возможно, вы хотите проверить существование, прежде чем убить его ... '} else if (wi> = 768 && $ (" div.innernav ul.menu .ui-accordion "). Length) {'? (Я думаю, '$ (" div.innernav ul.menu .ui-accordion ")' будет подходящим селектором, чтобы получить аккордеон, созданный '$ (" div.innernav ul.menu "). Accordion (.. .) '.) –

ответ

1

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

В еще части:

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

Тогда просто reifill меню, выполните уль же, как и готовой функции.

+0

Спасибо Дэйв - Это действительно пустило бы мой UL! Однако мне нужно, чтобы контент оставался там, где он есть. В конце я переписал функции с помощью этого вопроса переполнения стека: [link] (http://stackoverflow.com/questions/12733132/check-if-widget-is-available-before-running-jquery-function) – mousebat

1

В конце концов я снова написал функции, используя, если заявление, чтобы проверить, если виджет действительно активен на элементе: Check if Widget is Available Before Running Jquery Function

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

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