Question

一个javascript点击后改变classname的问题,望指教！

这是点击前的代码：
<ul id="menu" class="collapse" >
<li><a href="#">aaaaa</a></li>
<li><a href="#">bbbbb</a></li>
<li><a href="#">ccccc</a></li>
<li><a href="#">dddd</a></li>
</ul>

我要实现点击下面的四个链接中的任意一个之后，使用JS把代码变成如下下面的这样
也就是把<ul id="menu" class="collapse" >改为<ul id="menu" class=" in" style="height: auto;">
其他的不变，请问JS代码怎么写？望高手指点一二，谢谢！
点击后的代码：

<ul id="menu" class=" in" style="height: auto;">
<li><a href="#">aaaaa</a></li>
<li><a href="#">bbbbb</a></li>
<li><a href="#">ccccc</a></li>
<li><a href="#">dddd</a></li>
</ul>

Answer 1

//用jquery几句话就搞定了
var $lis = $("#menu li");//获取所有的li
//给每个li都加上点击事件
for(var li in $lis){
    $(li).click($(this).attr('class','in').css('height','auto'));
}

追问

麻烦在帮下忙
怎么获取 的id？

然后把id的值传递给$lis ，就是把#menu li改为一个变量

追答

这个不可以哦.ID本来就是要明确然后传过去取的啊.怎么能获取呢.

Answer 2

var ul = document.getElementById( 'menu' );
var li = ul.querySelectorAll( '#menu li' );

for( var i = 0; i < li.length; i++ )
{
    li[i].onclick = changeMenu;
}

function changeMenu()
{
    ul.setAttribute( 'class', 'in' );
    ul.style.height = 'auto';
}

Answer 3

$("#menu").removeClass("collapse").addClass("in").css('height','auto');