Plugin Accordéon jQuery: removeClass ('sélectionné')

Question

J'utilise le menu Accordion pour filtrer un tableau de données. Le menu contient deux filtres, avec plusieurs options sous chaque. Vous ne pouvez avoir qu'un seul filtre sélectionné à la fois. Si vous cliquez entre les deux options sous le premier filtre, la classe de style 'selected' est ajoutée et supprimée sans problème. Si vous cliquez sur une option sous le second filtre, elle ne supprime PAS la classe 'selected' du premier filtre. Toute aide serait appréciée. Je vous remercie.

<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="http://jquery.bassistance.de/accordion/jquery.accordion.js" type="text/javascript"></script> 


<div> 
<script type="text/javascript"> 
// <![CDATA[ 
jQuery.noConflict(); 
jQuery(document).ready(function(){ 
    jQuery('#navigation').accordion({active: 'h3.selected', header: 'h3.head', autoheight: false, }); 
    jQuery('.xtraMenu').accordion({active: 'h4.selected',header: 'h4.head', autoheight: false, }); 

}); 
// ]]> 
</script> 

<style type="text/css"> 
h3, h4 {font-weight: normal} 
h3.selected, h4.selected {font-weight:bold;} 
</style> 
<ul class="basic" id="navigation"> 
<li> 
    <h3 class="head"><a href="">Filter by Organization</a></h3> 
    <ul> 
    <li> 
     <ul class="xtraMenu basic"> 
     <li> 
      <h4 class="head"><a href="">Association</a></h4> 
     </li> 
     <li> 
      <h4 class="head"><a href="">Business</a></h4> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</li> 
<li> 
    <h3 class="head"><a href="">Filter by Type</a></h3> 
    <ul> 
    <li> 
     <ul class="xtraMenu basic"> 
     <li> 
      <h4 class="head"><a href="">Basic</a></h4> 
     </li> 
     <li> 
      <h4 class="head"><a href="">Advanced</a></h4> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</li> 
</ul> 
</div> 

Answer 1

Essayez d'utiliser l'événement change pour le deuxième filtre pour enlever la classe « sélectionnée » du premier filtre.

jQuery(".xtraMenu").accordion({ 
    active: 'h4.selected', 
    header: 'h4.head', 
    autoheight: false, 
    change: function() { 
     jQuery("#navigation > h3").each(function() { 
      jQuery(this).removeClass('selected'); 
     }); 
    } 
});