如何在li中添加class然後在li下單擊任何項​​目

Question

我遇到了問題，並試圖解決它幾個小時，但不能。我有一個sidemenu酒吧是如下格式：

<ul class="collapse" id="menu"> 
    <li class="panel active">// class "active" should be added <a data-target="#dashboard-nav" class="accordion-toggle" data-toggle="collapse" data-parent="#menu" href="#"> 
      <i class="icon-dashboard"></i> Dashboard <span class="pull-right"><i class="icon-angle-left"></i></span> 
     </a> 

     <ul id="dashboard-nav" class="collapse in">// class "in" should be added 
      <li class=""><a href="#"><i class="icon-angle-right"></i>Default Style</a> 
      </li> 
      <li class=""><a href="#"><i class="icon-angle-right"></i> Alternative Style</a> 
      </li> 
     </ul> 
    </li> 
    <li class="panel"> <a data-target="#registrations-nav" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#menu" href="#"> 
      <i class="glyphicon glyphicon-user"></i> Registrations<span class="pull-right"><i class="icon-angle-left"></i></span> 
     </a> 

     <ul id="registrations-nav" class="collapse"> 
      <li><a href="#"><i class="icon-plus-sign"></i> Create Registration</a> 
      </li> 
      <li class="active"><a href="#"><i class="icon-list"></i> List Registration</a> 
      </li> 
      <li><a href="#"><i class="icon-adn"></i> Manage Registration</a> 
      </li> 
     </ul> 
    </li> 
    <li class="panel"> <a data-target="#settings-nav" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#menu" href="#"> 
      <i class="icon-wrench"></i> Settings <span class="pull-right"><i class="icon-angle-left"></i> </span> 
     </a> 

     <ul id="settings-nav" class="collapse in"> 
      <li class="active"><a href="/ssw/index.php/admin/service/create"><i class="icon-leaf"></i> Services</a> 
      </li> 
      <li class=""><a href="#"><i class="icon-angle-right"></i> Sites</a> 
      </li> 
      <li class=""><a href="#"><i class="icon-angle-right"></i> Service Points</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

一旦我點擊以下'<ul>作爲 <li class="panel"> ... <ul id="dashboard-nav" class="collapse in"> 的<li class="panel">一類「活動」應在其被添加爲<li class="panel active">也「中的」類中的任何項目如果我無法清楚解釋，請告訴我。

在此先感謝

Answer 1

fiddle DEMO

參考

.addClass()

.removeClass()

.children()

this keyword

Answer 2

我製成一個JavaScript溶液，如下所示： -

 window.onload=start; 
     function start(){ 
      var list = document.getElementById("menu").childNodes; 
      for(i=0;i<list.length;i++){ 
       list[i].onclick=clicked; 
      } 
     } 
     function clicked(){ 
      var input = this; 
      input.className = "panel active" 
      var child = input.getElementsByTagName("ul")[0]; 
      child.className = "collaspe in" 
     }