jQuery折叠插件: removeClass('selected')

Question

我正在使用Accordion菜单过滤数据表。该菜单包含两个筛选器，每个筛选器下都有多个选项。一次只能选择一个筛选器。如果在第一个过滤器下的两个选项之间单击，则会添加和删除样式类“selected”，而不会出现任何问题。但是，如果您单击第二个筛选器下的选项，则不会从第一个筛选器中删除“选定的”类。任何帮助都将不胜感激。谢谢。

<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

尝试使用第二个筛选器的change事件删除第一个筛选器的“selected”类。

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