Javascript- Вложенный список не будет расширяться

Question

Хорошо. Таким образом, у меня есть список, который выглядит следующим образом (в основном) А) Mnfctr а) Линия продукта B) Mnfctr б б) линия продуктов Я хочу список, чтобы свернуть или развернуть, потому что страница является излишне большой, чтобы разместить высота. Вот мой код

<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

Смена источников изображения делает сложным задачу. Попробуйте установить фоновые изображения LI с помощью CSS.

.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 или слушателя событий.