Javascript-嵌套列表不会扩展

Question

好的。所以我有一个这样的列表（基本上） A）生产线a a）产品线 b）生产线b b）产品线 我希望列表展开和折叠，因为页面不必要的大以容纳高度。这里是我的代码

<script type="text/javascript"> 
    function toggle(id) { 

    ul = "ul_" + id; 
    img = "img_" + id; 
    ulElement = document.getElementById(ul); 
    imgElement = document.getElementById(img); 
    if (ulElement){ 
     if (ulElement.className == 'closed'){ 
       ulElement.className = "open"; 
       imgElement.src = "images/opened.gif"; 
       } 
       else{ 
       ulElement.className = "closed"; 
       imgElement.src = "images/closed.gif"; 
       } 
     } 
    } 

     </script> 

的CSS

#portslist{ 
     color:black; 
     border: 1px solid #babec9; 

    } 
    #portslist ul { 
     color:black; 
     font-size: 12px; 
     padding-left:3px; 
    } 
    #portslist ul li { 

    } 
    #portslist ul li ul { 

     padding: 5px 4px 4px; 
     font-size:9px; 

    } 
    #portslist ul li ul li{ 
     color:black; 
     height:15px; 
    margin-left:10px; 
    } 
    .open 
    {display:block;} 
    .closed 
    {display:none; 
    } 
    li img { 
     vertical-align:middle; 
     cursor:pointer; 
    } 

的HTML：

<ul class="open"> 
    <li id="item1"><a onlick="toggle('item1');"><img src="images/closed.gif" alt="" id="img_item1" border="0"></a> Texas Instruments 
    <ul id="ul_item1" class="closed"> 
     <li id="item1_1">RM4x DCAN</li> 
     </ul> 
    </li> 
    <li> Amtel 
    <ul class="closed"> 
     <li>SAM7</li> 
     </ul> 
    </li> 
    <li>Freescale 
    <ul class="closed"> 
     <li>HCS08</li> 
     <li>HCS12</li> 
     <li>HCS12X</li> 
     <li>MC68xxx</li> 
     <li>MCF5xxx</li> 
     <li>MPC5xxx</li> 
     <li>Kinetis Kxx</li> 
    </ul> 
    </li> 
</ul> 

谢谢大家这么多的帮助提前。

Answer 1

交换图像源使问题更加复杂。尝试使用CSS设置LI背景图像。

.open { 
    background:url(http://michaelfward.byethost7.com/images/opened.gif) no-repeat left center; 
} 
.closed { 
    background:url(http://michaelfward.byethost7.com/images/closed.gif) no-repeat left center; 
} 
.closed > ul {display:none;} 
.open > ul {display:block;} 

然后交换父LI上的类。

var toggles = document.getElementById('portslist').getElementsByTagName('li'); 
for(var t in toggles){ 
    if(toggles[t].className == "") continue; 
    toggles[t].onclick = function(){ 
     this.className = this.className == "closed" ? "open" : "closed"; 
    } 
} 

实施例：http://jsfiddle.net/Cww29/2/

当然，这将需要被放置在窗口的onload功能或事件侦听器。