请教左侧两层菜单点击变色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
  .w{background-color:#fff}
  .r{background-color:red}
  </style>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
function changeAll(){
var root = document.getElementById('menunav');
recursion(root,'w'); } function recursion(node,cN){
var childs = node.childNodes;
for(var i=0;i<childs.length;i++){
if(childs[i].nodeType == 1){
childs[i].className=cN;
recursion(childs[i],cN);
}
}
} function change(obj){
changeAll();
//alert(obj.innerHTML)
obj.className='r';
recursion(obj,'r');
event.cancelBubble = true;//注意这个， 阻止事件向上冒泡传递。 }
  </script>
 </HEAD> <BODY>
  <ul id="menunav"> 
<li onclick='change(this)'>AAA 
<ul id="menunav1" onclick='change(this)'>   
<li>sss </li> 
<li> bbbb</li> 
</ul>
</li> 
<li onclick='change(this)'> BBB
<ul id="menunav2" onclick='change(this)'>  
<li>ccc </li> 
<li> dddd</li> 
</ul> 
</li> 
</ul> 
 </BODY>
</HTML>

解决方案 »

  1.   

    谢谢luojihaidao ，不过再我运行过程中遇到一个问题，现在实现的功能是整个ul进行变色
    能不能具体到每个li，我点一个li，就单独这个li变色
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style>
      .w{background-color:#fff}
      .r{background-color:red}
      #menunav{background-color:blue}
      .aa{background-color:yellow}
      </style>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script>
        function changeAll(){
            var root = document.getElementById('menunav');
            recursion(root,'w');    }    function recursion(node,cN){
            var childs = node.childNodes;
            for(var i=0;i<childs.length;i++){
                if(childs[i].nodeType == 1){
                    childs[i].className=cN;
                    recursion(childs[i],cN);
                }    
            }
        }    function change(obj){
            changeAll();
            //alert(obj.innerHTML)
            obj.className='r';
            recursion(obj,'r');
            event.cancelBubble = true;//注意这个， 阻止事件向上冒泡传递。    }
      </script>
     </HEAD> <BODY>
    <ul id="menunav"> 
    <li onclick='change(this)'>AAA 
    <ul id="menunav1" onclick='change(this)' class ="aa">   
    <li onclick='change(this)'>sss </li> 
    <li onclick='change(this)'> bbbb</li> 
    </ul>
    </li> 
    <li onclick='change(this)'> BBB
    <ul id="menunav2" onclick='change(this)' class="aa">  
    <li onclick='change(this)'>ccc </li> 
    <li onclick='change(this)'> dddd</li> 
    </ul> 
    </li> 
    </ul> 
     </BODY>
    </HTML>
    比如上述代码我现在默认对父菜单和子菜单加了蓝色和黄色背景色，那我现在如何在点击一个菜单后恢复之前设置的颜色
      

  3.   

    小改了一下， 这样也可以。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style>
      .w{background-color:#fff}
      .r{background-color:red}
      .b{background-color:blue}
      </style>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script>
        function changeAll(){
            var root = document.getElementById('menunav');
            recursion(root,'w');    }    function recursion(node,cN){
            var childs = node.childNodes;
            for(var i=0;i<childs.length;i++){
                if(childs[i].nodeType == 1){
                    childs[i].className=cN;
                    recursion(childs[i],cN);
                }    
            }
        }    function change(obj,c){
            changeAll();
            //alert(obj.innerHTML)
            obj.className=c;
            recursion(obj,c);
            event.cancelBubble = true;//注意这个， 阻止事件向上冒泡传递。    }
      </script>
     </HEAD> <BODY>
      <ul id="menunav"> 
    <li onclick='change(this,"b")'>AAA 
    <ul id="menunav1">   
    <li onclick='change(this,"r")'>sss </li> 
    <li onclick='change(this,"r")'> bbbb</li> 
    </ul>
    </li> 
    <li onclick='change(this,"b")'> BBB
    <ul id="menunav2">  
    <li onclick='change(this,"r")'>ccc </li> 
    <li onclick='change(this,"r")'> dddd</li> 
    </ul> 
    </li> 
    </ul> 
     </BODY>
    </HTML>
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style>
      .w{background-color:#fff}
      .r{background-color:red}
      .b{background-color:blue}
      </style>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script>
        function changeAll(){
            var root = document.getElementById('menunav');
            recursion(root,'w');    }    function recursion(node,cN){
            var childs = node.childNodes;
            for(var i=0;i<childs.length;i++){
                if(childs[i].nodeType == 1){
                    childs[i].className=cN;
                    recursion(childs[i],cN);
                }    
            }
        }    function change(obj,c){
            changeAll();
            //alert(obj.innerHTML)
            obj.className=c;
            recursion(obj,c);
            event.cancelBubble = true;//注意这个， 阻止事件向上冒泡传递。    } function changeP(obj,c){
    var childs = obj.childNodes;
    for(var i=0;i<childs.length;i++){
    if(childs[i].nodeType == 1){
    //alert(childs[i].style.display)
    if(childs[i].style.display ==''){
    childs[i].style.display = 'none';
    obj.className = c;
    }else{
    childs[i].style.display = '';
    obj.className = 'w';
    }
    }
    }
    }
      </script>
     </HEAD> <BODY>
      <ul id="menunav"> 
    <li onclick='changeP(this,"b")'>AAA 
    <ul id="menunav1">   
    <li onclick='change(this,"r")'>sss </li> 
    <li onclick='change(this,"r")'> bbbb</li> 
    </ul>
    </li> 
    <li onclick='changeP(this,"b")'> BBB
    <ul id="menunav2">  
    <li onclick='change(this,"r")'>ccc </li> 
    <li onclick='change(this,"r")'> dddd</li> 
    </ul> 
    </li> 
    </ul> 
     </BODY>
    </HTML>