Question

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

<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事件来删除第一个过滤器的“已选择”类。

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

jQuery Accordion插件：removeClass（'selected'）

1 个答案: