Javascript 如何在li中添加类，然后在li下单击任意项

我遇到了一个问题，几个小时来一直试图解决它，但没能解决。我有一个侧菜单栏，其格式如下：

<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>

//应添加类“active”
应添加
//类“in”

单击

的任何项目后，应在其中添加一个类“active”，作为

，并在下面的

中作为

...

如果我解释不清楚，请告诉我

提前感谢

参考资料




我为它制作了一个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"
        }

window.onload=start；
函数start（）{
var list=document.getElementById（“菜单”）.childNodes；
对于（i=0；我想立即回复。我已经快到了，但是我应该单击
$（'li.panel'）
的项目，那将是
$（'li.panel ul li'）
。在这种情况下，如何解决。请帮助我。但是，我已经使用parent（）解决了这个问题，感谢您的合作。
        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"
        }