jQuery Accordion-現在選択されているコンテンツパーツのインデックスが必要

accordion indexing jquery
jQuery Accordion-現在選択されているコンテンツパーツのインデックスが必要

jQuery Accordionに基づいたWebページにシンプルなメニューがあります。 コードをいくらか単純化しましたが、このように見えます。

Menu A

  Item A1

  Item A2



Menu B

  Item B1

  Item B2






jQuery(function() {
 jQuery("#menu_div").accordion({
  active: 1,
  change: function(event, ui) {
      alert('bob');
  }})
});

これにより、ページが開いたときにアコーディオンの2番目の「部分」が開きます。 (アクティブ:1)ヘッダーのいずれかをクリックすると、単純なアラート「ボブ」がポップアップ表示されます。 ここまでは順調ですね。

次に、「bob」をヘッダーのインデックスに置き換えます。 したがって、「アクティブ」の「読み取り」バージョンです。 つまり、最初のアコーディオンヘッダーをクリックすると0になり、2番目のヘッダーをクリックすると1になります。

(もちろん、私は実際にAlertを行いたくありません。値でサーバーにAjax呼び出しを行いたいので、サーバーはクライアントで開いているメニューを認識します。 その部分はできますが、適切な価値を送信するのに苦労しています。 インデックスが利用できない場合は、別の提案をお気軽にご提供ください)。

ありがとうございます。

  13  3


ベストアンサー

JQuery UI Webサイトで入手可能なjquery UIドキュメントから:

//getter
var active = $('.selector').accordion('option', 'active');

またはあなたの場合

var active = jQuery("#menu_div").accordion('option', 'active');

23


BruceのGoogle Law-どれだけ苦労してもかまいません。質問を投稿してから1分後に、Googleが最終的に回答を提供します。

  function(event, ui) {
  var index = jQuery(this).find("h3").index(ui.newHeader[0]);
  alert('bob ' + index);
  }})});

まあ、これは他の誰かを助けてくれるかもしれません。

19


を使用してアクティブなインデックスを取得できます

ui.options.active

7


activate: function(event, ui)

変更の代わりにactivateメソッドを使用してください。 それは私にとってはうまくいきます。

0


これを試してください。アコーディオンの名前が必要です。これは私がやったことです。 上記のhtmlで動作するはずです。 それが役に立てば幸い。 より良い解決策は、アコーディオンヘッダーにIDを指定して直接取得することです。

    $("#accordion1").accordion({
        heightStyle:    "fill",
        activate: function( event, ui ) {
            var name =  ui.newHeader[0].childNodes[1].innerHTML;
            console.log(name);
        }
    });

0


以下は、ウィジェットを使用したWordPress開発の実用的な例です。

ウィジェットフォーム内にアコーディオンがあり、ユーザーがウィジェットを保存したときにどの「設定グループ」にいたかを覚えておく必要があるとします。

jQuery( document ).ready( function () {

    var current_settings_group = false;

    var do_widget_js = function ( $widget_id ) {

        var target = ".mbe-accordion"; // Your generic accordion selector

        if ( $widget_id ) {
            target = "#" + $widget_id + " " + target;
        }

        jQuery( target ).accordion( {
            collapsible: true,
            active: current_settings_group,
            heightStyle: "content",
            activate: function ( event, ui ) {
                current_settings_group = jQuery( this ).find( "h3" ).index( ui.newHeader[0] );
            }
        } );

    };

    do_widget_js();

    jQuery( document ).on( "widget-added widget-updated", function ( $event, $widget ) {
        do_widget_js( jQuery( $widget ).attr( 'id' ) );
    } );

} );

0


タイトルとURLをコピーしました