jQuery Accordion - нужен индекс текущей выбранной части контента - PullRequest
Новая
       6

jQuery Accordion - нужен индекс текущей выбранной части контента

13 голосов
/ 10 февраля 2010

У меня есть простое меню на веб-странице, основанное на jQuery Accordion. Я несколько упростил код, и он выглядит так: 

<div id="menu_div" class="nt-tab-outer nt-width-150px">

<h3 class="nt-tab-title"><a href="#">Menu A</a></h3>
<div id="menu_1_div">
  <a href="itemA1">Item A1</a><br />
  <a href="itemA2">Item A2</a><br />
</div>

<h3 class="nt-tab-title"><a href="#">Menu B</a></h3>
<div id="menu_2_div">
  <a href="fTabsDyn">Item B1</a><br />
  <a href="fPlainDyn">Item B2</a><br />
</div>

</div>

<script type="text/javascript">
jQuery(function() {
 jQuery("#menu_div").accordion({
  active: 1,
  change: function(event, ui) { 
      alert('bob');
  }})
});

</script>

Устанавливает 2-ю "часть" аккордеона при открытии страницы. (active: 1) и если щелкнуть любой из заголовков, появится простое предупреждение «bob». Пока все хорошо.

Теперь я хотел бы заменить "bob" на индекс заголовка. Так что «читаемая» версия «активная». т.е. когда щелкают по первому заголовку аккордеона, я получаю 0, а если щелкаю по второму заголовку, я получаю 1.

(Кроме того, конечно, я действительно не хочу делать оповещение, я хочу сделать Ajax-вызов на сервер со значением, чтобы сервер знал, какое меню открыто на клиенте. Эту часть я могу сделать , но я изо всех сил пытаюсь получить правильное значение для отправки. Если индекс недоступен, не стесняйтесь предлагать альтернативные предложения).

Спасибо!

Ответы [ 6 ]

24 голосов
/ 10 февраля 2010

Из документации jQuery UI, доступной на веб-сайте JQuery UI : 

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

или в вашем случае 

var active = jQuery("#menu_div").accordion('option', 'active');
19 голосов
/ 10 февраля 2010

Закон Брюса о Google - не имеет значения, как долго вы боретесь, через 1 минуту после публикации вашего вопроса Google наконец предложит ответ. 

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

Ну, может, это поможет кому-то еще в будущем.

7 голосов
/ 02 мая 2011

Вы можете получить активный индекс, используя 

ui.options.active
0 голосов
/ 06 апреля 2018

Вот практический пример в WordPress Development, работа с виджетами.

Скажем, у вас есть аккордеон в форме виджета, и вы хотите, чтобы он запомнил, в какой «группе настроек» был пользователь, когда он сохранил виджет. 

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 голосов
/ 25 июня 2015

попробуйте это: нужно имя аккордеона, это то, что я сделал. должно работать для вышеупомянутого HTML. Надеюсь, поможет. Лучшее решение - дать идентификатор заголовку аккордеона и получить его напрямую. 

    $("#accordion1").accordion({
        heightStyle:    "fill",
        activate: function( event, ui ) {
            var name =  ui.newHeader[0].childNodes[1].innerHTML;
            console.log(name);
        }
    });
0 голосов
/ 25 февраля 2015 
activate: function(event, ui)

пожалуйста, используйте метод активации вместо изменения. У меня отлично работает.

...