simple - jQuery Accordion-Necesita índice de la parte de contenido seleccionada actualmente

plugin accordion jquery

Question

Tengo un menú simple en una página web, basado en jQuery Accordion. He simplificado un poco el código, y se ve así;

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

Esto establece la segunda "parte" del acordeón abierta cuando se abre la página. (activo: 1) y si se hace clic en alguno de los encabezados aparece una alerta simple "bob". Hasta aquí todo bien.

Ahora me gustaría reemplazar "bob" con el índice del encabezado. Entonces, la versión de "lectura" de "activo". es decir, cuando se hace clic en el primer encabezado del acordeón, obtengo 0, y si se hace clic en el segundo encabezado, obtengo un 1.

(Aparte, por supuesto, realmente no quiero hacer una alerta, quiero hacer una llamada AJAX al servidor con el valor, para que el servidor sepa qué menú está abierto en el cliente. Esa parte puedo hacer, pero yo Estoy luchando por obtener el valor correcto para enviar. Si el índice no está disponible, no dude en ofrecer sugerencias alternativas).

¡Gracias!

Answer 1

De la documentación de jquery UI disponible en el sitio web de JQuery UI :

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

o en tu caso

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

Answer 2

La ley de Google de Bruce: no importa cuánto tiempo luches, 1 minuto después de publicar tu pregunta, Google finalmente ofrecerá la respuesta.

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

Oh, bueno, tal vez esto ayude a alguien más en el camino.

Answer 3

Puede obtener el índice activo usando

ui.options.active

Answer 4

activate: function(event, ui)

por favor use el método de activar en lugar de cambiar. Funciona bien para mí.

Answer 5

intente esto: necesito el nombre del acordeón esto es lo que hice. debería funcionar para el html anterior. Espero eso ayude. Una mejor solución es dar una identificación al encabezado del acordeón y buscarlo directamente.

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