jQuery手风琴活动状态

Question

导航

<ul id="accordion">
  <li> 
    <a class="open_link"  href="#">1</a>
    <ul class="sub_accardion ">
      <li>
        <a class="sub_link"  href="#">1.1</a>
        <ul>
          <li><a href="#">1.1.1</a></li>    
          <li><a href="#">1.1.1</a></li>    
          <li><a href="#">1.1.1</a></li>    
        </ul>
      </li>
      <li>
        <a class="sub_link"  href="#">1.2</a>
        <ul>
          <li><a href="#">1.2.1</a></li>    
          <li><a href="#">1.2.1</a></li>    
          <li><a href="#">1.2.1</a></li>    
        </ul>
      </li>
    </ul>
  </li> 
</ul>

---

的jQuery

<script type="text/javascript" >
$(function() {
    $( "#accordion" ).accordion({   
        header: '.open_link',       
        active: "false",
        heightStyle: "content",     
        collapsible: true, 
    }); 
    $( ".sub_accardion" ).accordion({   
        active:'false',
        header: '.sub_link',    
        heightStyle: "content",     
        collapsible: true, 
    });    
});
</script> 

---

问题

如何在任何面板上添加一个类来设置活动？我试过了active:'.active'，但它不起作用。

Answer 1

这不是jQuery UI Accordion的正确标记。

按照documentation：

  

底层HTML标记是一系列标题（H3标记）和   content divs所以内容可以在没有JavaScript的情况下使用。

由于您使用的是 UL 标记，因此我认为您要找的是jQuery UI Menu。

以下是我对您的代码所做的事情：

---

HTML

<ul id="menu">
    <li> 
        <a class="open_link" href="#">1</a>
        <ul>
            <li> 
                <a class="sub_link" href="#">1.1</a>
                <ul>
                    <li><a href="#">1.1.1</a></li>
                    <li><a href="#">1.1.1</a></li>
                    <li><a href="#">1.1.1</a></li>
                </ul>
            </li>
            <li> 
                <a class="sub_link" href="#">1.2</a>
                <ul>
                    <li><a href="#">1.2.1</a></li>
                    <li><a href="#">1.2.1</a></li>
                    <li><a href="#">1.2.1</a></li>
                </ul>   
            </li>
        </ul>
    </li>
</ul>

---

JQUERY

$("#menu").menu();

---

CSS

.ui-menu { width: 100px; }

---

的 See working jsFiddle demo 的