七天新手写可折叠菜单
日期：2014-05-16 浏览次数：20499 次
7天新手写可折叠菜单
学了7天js，写了一个可折叠菜单：
大家一看就应该知道我要的效果，但是为什么只有第一个菜单生效呢？
1、请大师们指点一下！
2、要实现这样的效果，更好的js写法是怎样的（多注释，新手感激！）？
------解决方案--------------------
学了7天js，写了一个可折叠菜单：
大家一看就应该知道我要的效果，但是为什么只有第一个菜单生效呢？
1、请大师们指点一下！
2、要实现这样的效果，更好的js写法是怎样的（多注释，新手感激！）？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可折叠菜单</title>
</head>
<body>
<script>
window.onload = menu;
function menu(){
var nav=document.getElementById("nav");
var links=nav.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
if(links[i].className == "ulia"){
links[i].onclick=function(){
var ul=nav.getElementsByTagName("ul");
for(var j=0; j<ul.length; j++){
var ulul=ul[j].getElementsByTagName("ul")[0];
if(ulul.style.display == "block" || ulul.style.display == ""){
ulul.style.display = "none";
}else{
ulul.style.display = "block";
}
}
}
return false;
}
}
}
</script>
<nav id="nav">
<ul>
<li>
<a href="#" class="ulia">AAAAAA</a>
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaaaa</a></li>
<li><a href="#">aaaaaa</a></li>
</ul>
</li>
<li>
<a href="#" class="ulia">BBBBB</a>
<ul>
<li><a href="#">bbbbbb</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">bbbbbbb</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
------解决方案--------------------
function menu(){
var nav=document.getElementById("nav");
var links=nav.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
if(links[i].className == "ulia"){
links[i].onclick=function(){
// 这里应该取当前这个<a>下面的<ul>
// 这个循环完全是没必要的,而且逻辑错误
var ul=nav.getElementsByTagName("ul");
for(var j=0; j<ul.length; j++){
&nbs
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
