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 теги) и дивы контента, так что содержание может использоваться без 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