0

ウィンドウのサイズが設定値を超えたときにアコーディオン ウィジェットを削除する際に問題が発生しました。

jQuery 1.8.3 と jQuery UI 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'

このエラーにより、ページにある他のコードが壊れているように見えるので、このエラーを削除することができます。私はjavascript/jQueryの初心者なので、助けていただければ幸いです。

どうもありがとう!

4

2 に答える 2

2

レディ関数を別の関数に変更してみてください。

else部分内:

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

次に、ready関数と同じようにulメニューを再入力します。

于 2013-01-11T15:16:06.737 に答える
1

最後に、要素でウィジェットが実際にアクティブであるかどうかを確認するために、if ステートメントを使用して関数を書き直しました。

完成したコードは次のとおりです。

$(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});
        }
    });
});
于 2013-01-11T15:49:58.867 に答える