JS 点击了不能缩回去,求高人啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="w3.org/1999/xhtml"> 
<head> 
<title>runcode</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"> 
function flexMenu(id)
{
 var $id = document.getElementById(id);
 var titleList = $id.getElementsByTagName('h2');
 var contentList = $id.getElementsByTagName('div');
 titleList[titleList.length-1].style.border = 'none';
 for(var i=0;i<titleList.length;i++)
 {   
  titleList[i].onclick = function()
  {
  
   for(var a=0;a<contentList.length;a++)
   {
    //contentList[a].style.display = 'none';
   }
   if(this.nextSibling.nodeType=='3')
   {
    this.nextSibling.nextSibling.style.display = '';
   }else
   {
    this.nextSibling.style.display = '';
   }
  }
 }
}
window.onload = function(){ flexMenu('ProSortBox')}
</script> 
</head> 
<body> 
<div id="ProSortBox">
<h2 class="title"><a href="#">Sealing Material</a></h2> 
<div class='content' style='display:none;'>
<ul id='prosort2'>
<li><a href="ProIndex_513-500-1.html" title="Asbestos Rubber Sheets">Asbestos Rubber Sheets</a></li>
<li><a href="ProIndex_513-501-1.html" title="Non-Asbestos Jointing Sheets">Non-Asbestos Jointing Sheets</a></li>
<li><a href="ProIndex_513-502-1.html" title="Asbestos Latex Paper/Sheet">Asbestos Latex Paper/Sheet</a></li>
<li><a href="http://www.wto2.com" title="外贸网站建设">外贸网站建设</a></li>
<li><a href="ProIndex_513-504-1.html" title="Graphite Sheets">Graphite Sheets</a></li>
</ul></div>
<h2 class="title"><a href="#">Cylinder Head Gasket</a></h2> 
<div class='content' style='display:none;'>
<ul id='prosort2'>
<li><a href="ProIndex_513-506-1.html" title="TOYOTA  gasket">TOYOTA  gasket</a></li>
<li><a href="ProIndex_513-507-1.html" title="NISSAN  1">NISSAN  1</a></li>
<li><a href="ProIndex_513-508-1.html" title="MITSUBISHI 1">MITSUBISHI 1</a></li>
<li><a href="ProIndex_513-509-1.html" title="HONDA 1">HONDA 1</a></li>
<li><a href="ProIndex_513-510-1.html" title="MAZDA 1">MAZDA 1</a></li>
<li><a href="ProIndex_513-511-1.html" title="SUZUKI 1">SUZUKI 1</a></li>
</ul></div>
<h2 class="title"><a href="#">Full Gasket Set</a></h2> <div class='content' style='display:none;'><ul id='prosort2'>
<li><a href="ProIndex_513-522-1.html" title="TOYOTA">TOYOTA</a></li>
<li><a href="ProIndex_513-523-1.html" title="NISSAN">NISSAN</a></li>
<li><a href="ProIndex_513-524-1.html" title="MITSUBISHI">MITSUBISHI</a></li>
<li><a href="ProIndex_513-525-1.html" title="ISUZU">ISUZU</a></li>
<li><a href="ProIndex_513-526-1.html" title="MAZDA">MAZDA</a></li>
<li><a href="ProIndex_513-527-1.html" title="VOLKSWAGEN">VOLKSWAGEN</a></li>
<li><a href="ProIndex_513-528-1.html" title="DAEWOO">DAEWOO</a></li>
</ul></div>
</div>
</body> 
</html>

解决方案 »

  1.   

    是不是要这样的效果
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="w3.org/1999/xhtml">  
    <head>  
    <title>runcode</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">  
    function flexMenu(id,titleTag,subTitleTag)
    {
     var $id = document.getElementById(id);
     var titleList = $id.getElementsByTagName(titleTag);
     var contentList = $id.getElementsByTagName(subTitleTag);
     titleList[titleList.length-1].style.border = 'none';
     
     var nextElementNode;
     for(var i=0;i<titleList.length;i++)
     {   
      titleList[i].onclick = function()
      {
      nextElementNode= getNextElement(this);
      if(nextElementNode.style.display == 'none'){
     nextElementNode.style.display = 'block';
      }else{
     nextElementNode.style.display = 'none';
      }
      }
     }
    }//获取该节点的下一个元素节点
    function getNextElement(node){
    if(node == null){
    return null;
    }
    else if(node.nextSibling.nodeType == '1'){
    return node.nextSibling;
    }else{
    getNextElement(node.nextSibling);
    }
    }
    window.onload = function(){ flexMenu('ProSortBox','h2','div')}
    </script>  
    </head>  
    <body>  
    <div id="ProSortBox">
    <h2 class="title"><a href="#">Sealing Material</a></h2>  
    <div class='content' style='display:none;'>
    <ul id='prosort2'>
    <li><a href="ProIndex_513-500-1.html" title="Asbestos Rubber Sheets">Asbestos Rubber Sheets</a></li>
    <li><a href="ProIndex_513-501-1.html" title="Non-Asbestos Jointing Sheets">Non-Asbestos Jointing Sheets</a></li>
    <li><a href="ProIndex_513-502-1.html" title="Asbestos Latex Paper/Sheet">Asbestos Latex Paper/Sheet</a></li>
    <li><a href="http://www.wto2.com" title="΢óθվݨʨ">΢óθվݨʨ</a></li>
    <li><a href="ProIndex_513-504-1.html" title="Graphite Sheets">Graphite Sheets</a></li>
    </ul></div>
    <h2 class="title"><a href="#">Cylinder Head Gasket</a></h2>  
    <div class='content' style='display:none;'>
    <ul id='prosort2'>
    <li><a href="ProIndex_513-506-1.html" title="TOYOTA gasket">TOYOTA gasket</a></li>
    <li><a href="ProIndex_513-507-1.html" title="NISSAN 1">NISSAN 1</a></li>
    <li><a href="ProIndex_513-508-1.html" title="MITSUBISHI 1">MITSUBISHI 1</a></li>
    <li><a href="ProIndex_513-509-1.html" title="HONDA 1">HONDA 1</a></li>
    <li><a href="ProIndex_513-510-1.html" title="MAZDA 1">MAZDA 1</a></li>
    <li><a href="ProIndex_513-511-1.html" title="SUZUKI 1">SUZUKI 1</a></li>
    </ul></div>
    <h2 class="title"><a href="#">Full Gasket Set</a></h2>  <div class='content' style='display:none;'><ul id='prosort2'>
    <li><a href="ProIndex_513-522-1.html" title="TOYOTA">TOYOTA</a></li>
    <li><a href="ProIndex_513-523-1.html" title="NISSAN">NISSAN</a></li>
    <li><a href="ProIndex_513-524-1.html" title="MITSUBISHI">MITSUBISHI</a></li>
    <li><a href="ProIndex_513-525-1.html" title="ISUZU">ISUZU</a></li>
    <li><a href="ProIndex_513-526-1.html" title="MAZDA">MAZDA</a></li>
    <li><a href="ProIndex_513-527-1.html" title="VOLKSWAGEN">VOLKSWAGEN</a></li>
    <li><a href="ProIndex_513-528-1.html" title="DAEWOO">DAEWOO</a></li>
    </ul></div>
    </div>
    </body>  
    </html>
      

  2.   

    楼上正解
    JQuery函数更简单，不知楼主试过没有：
    $(document).ready(function(){
    $("h2").each().click(function(){
    if($(this).attr(display)=="none"){
            $("div").each().css({display:"none"});
            $(this).css({display:"block"});
    }
    else{
    $(this).css({display:"none"});
    }
    })
    })
      

  3.   

    if($(this).attr("display")=="none")
    忘记加引号了
      

  4.   


    <script type="text/javascript"> 
    function flexMenu(id)
    {
     var $id = document.getElementById(id);
     var titleList = $id.getElementsByTagName('h2');
     var contentList = $id.getElementsByTagName('div');
     var uls=$id.getElementsByTagName('ul');
     titleList[titleList.length-1].style.border = 'none';
     for(var i=0;i<titleList.length;i++)
     {  
      titleList[i].i=i;
      titleList[i].onclick = function(){uls[this.i].parentNode.style.display=(uls[this.i].parentNode.style.display=="none"?"block":"none");}
      }
    }
    window.onload = function(){ flexMenu('ProSortBox')}
    </script> 最好修改下html结构，方便js的使用
    再改改吧