0

ここで見つかったアコーディオンの展開/折りたたみ時に JScrollPane を再初期化しようとしています。親の 1 つ (Stone Tiles、Stone Sinks、Stone Wall Clading など) をクリックして、アコーディオンのデモを行うことができます。

現在、次のJQueryを使用してクリックイベントとして設定しています...

var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;

$("ul#widget-collapscat-5-top > li.collapsing").click(function() {
    $(this).delay(3000);
    api.reinitialise();
});

親を2回目にクリックすると機能するようですが、最初は機能しません。理由はわかりませんが、折りたたみが完了したときにこの関数を追加できるように、アコーディオンの JS を編集しようとしました (このクリックの回避策を実行しようとするのではなく)。崩壊 JS はここで見ることができます。

ここで再初期化機能のJSを追加しようとしましたが、何かがうまくできていないようです。

正しい方向に向けてもらえますか？

ありがとう！

4

2 に答える 2

0

たぶん、次のように、各クリックアクションの最後にaddExpandCollapse関数を呼び出すように関数を変更できます。reinitialise

function addExpandCollapse(id, expandSym, collapseSym, accordion) {
  jQuery('#' + id + ' .expand').live('click', function() {
    if (accordion==1) {
      var theDiv = jQuery(this).parent().parent().find('span.collapse').parent().find('div');
      jQuery(theDiv).hide('normal');
      jQuery(this).parent().parent().find('span.collapse').removeClass('collapse').addClass('expand');
        createCookie(theDiv.attr('id'), 0, 7);
    }
    jQuery('#' + id + ' .expand .sym').html(expandSym);
    expandCat(this, expandSym, collapseSym);

    api.reinitialise(); // HERE

    return false;
  });
  jQuery('#' + id + ' .collapse').live('click', function() {
    collapseCat(this, expandSym, collapseSym);

    api.reinitialise(); // and HERE

    return false;
  });
}

安全を期すためvar api = pane.data('jsp');に、ファイル内のどこかに上記のコードの前の行があることを確認してください。

于 2012-09-21T16:57:50.920 に答える
0

はapi.reinitialise()正常に動作しています。何が起こっているかというと、クリックするとサイズが更新されますが、この時点では要素はまだ展開されていません。同じセクションを展開、折りたたみ、再度展開しても何も起こらないことに気付くかもしれません。ただし、1 つを展開してから別の要素をクリックすると、ScrollPane は最初に展開された要素のサイズに調整されます。

イベントでこれを解決でき$(this).trigger('colapseComplete')ます。崩壊が終了したときに配置します。次に、次を使用できます。

//Listening to the colapseComplete event we triggered above
$("#widget-collapscat-5-top > li.collapsing").on('colapseComplete', function() {
  api.reinitialise();
});
于 2012-09-21T16:59:38.357 に答える