Problème d'accordéon jquery imbriqué

Question

Première question jamais posée à stackoverflow. Donc, problème est: Deux déclarations d'accordéon sur document.ready (jquery 1.4.2 jquery ui 1.8.2):

 $(document).ready(function() { 
     $("#accordion").accordion({ 
      header: 'h3' 
     }); 

     $("#accordion2").accordion({ 
      header: 'h4' 
     }); 

     $(function() { 
      $(".get-index").click(function() { 
       var activecontent = $("#accordion").accordion("option", "active"); 
       alert(activecontent);     
      }); 
     }); 
    }); 

HTML:

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
     Content Section 1: Parent 
     <div id="accordion2"> 
      <h4><a href="#">SubSection 1</a></h4> 
      <div>content section 1: child</div> 
      <h4><a href="#">SubSection 2</a></h4> 
      <div>content section 2: child</div> 
      <h4><a href="#">SubSection 3</a></h4> 
      <div>content section 3: child</div> 
      <h4><a href="#">SubSection 4</a></h4> 
      <div>content section 4: child</div> 
     </div> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
     Content Section 2: Parent 
    </div> 
    <h3><a href="#">Section 3</a></h3> 
    <div> 
     Content Section 3: Parent 
    </div> 
    <h3><a href="#">Section 4</a></h3> 
    <div> 
     Content Section 4: Parent 

     <button type="button" class="get-index ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> 
      <span class="ui-button-text">index</span> 
     </button> 

    </div> 
</div> 

Et enfin: quel est le problème et pourquoi "activecontent" est 7? Je sais, qu'il y a 4 panneaux parents + 4 panneaux enfants et à partir de 0, il est 7. Mais j'essaie d'obtenir l'indice du dernier parent et il devrait être 3.

Toute aide très appréciée.

code affiché: http://jsbin.com/eqewe

Answer 1

Malheureusement, ce bogue dans jQuery UI, in the accordion code:

o.active = o.collapsible && clickedIsActive ? false 
    : $('.ui-accordion-header', this.element).index(clicked); 

Il est de trouver une $('.ui-accordion-header'), pas seulement le sélecteur d'en-tête que vous avez spécifié et non seulement les enfants immédiats. Je vais mettre cela dans un bug avec les gars de l'interface utilisateur jQuery, la propriété .active devrait vraiment être définie différemment. Je suis entré un bug avec l'équipe jQuery UI pour ce ici: http://dev.jqueryui.com/ticket/5841

---

Vous pouvez travailler autour pour l'instant en trouvant l'élément vous avec .index(), comme ceci:

$(function() { 
    $(".get-index").click(function() { 
    var a= $("#accordion").children('.ui-state-active').index('#accordion > h3'); 
    alert(a);     
    }); 
});​ 

You can try it out here