JQuery Accordion - индекс потребности в выбранной части контента

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

<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>

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

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

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

Спасибо!

Ответ 1

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

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

Хорошо, может быть, это поможет кому-то еще по дороге.

Ответ 2

Из документации пользовательского интерфейса jquery, доступной на веб-сайте JQuery UI:

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

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

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

Ответ 3

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

ui.options.active

Ответ 4

activate: function(event, ui)

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

Ответ 5

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

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