2009-07-07 6 views
0

Je n'arrive pas à mettre en place deux accordéons indépendants. Ils devraient s'ouvrir/se fermer indépendamment et accordéion2 devrait être imbriqué dans accordéion1 (code voir ci-dessous)
Ce qui se produit actuellement, c'est qu'ils se chevauchent lorsqu'ils sont ouverts et IE est même en train d'écraser le texte ci-dessous accordéon 1. Cela ne devrait pas arriver.

Des idées quoi améliorer?

Merci beaucoup de toute aide!
ViveProblème imbriqué d'accordéon Jquery

<script type="text/javascript"> 

     $(document).ready(function() { 
       $("#accordion1").accordion(); 
       $("#accordion2").accordion(); 

       $('#accordion1 .q1').click(function() { 
        $(this).next().toggle(); 
        return false; 
       }).next().hide(); 

       $('#accordion2 .q2').click(function() { 
        $(this).next().toggle(); 
        return false; 
       }).next().hide(); 

     }); 

    </script> 
    <style type="text/css"> 

       #sub1 { height:100px; background: #FF0000;} 
       #sub2 { height:100px; background: #FF00FF;} 
    </style> 

    </HEAD> 
    <BODY> 

     <div id="accordion1"> 
      <div> 
       <a class="q1" href="#"> 
       accordion 1 
       </a> 
       <div id="sub1"> 
       <div id="accordion2"> 
        <div> 
         <a class="q2" href="#"> 
         accordion 2 
         </a> 
         <div id="sub2"> 
         222222222 
         </div> 
        </div> 
       </div> 
       text below accordion 2 
       </div> 
      </div> 
     </div> 
     text below accordion 1 
    </BODY> 
</HTML> 

Répondre

2

Utilisation #accordian1 > div > .q1 au lieu de #accordian1 .q1, parce que sélecteur correspond également aux enfants du deuxième accordéon ainsi.