好的。所以我有一个这样的列表(基本上)
A)Mnfctr a
  a)产品线
B)Mnfctr 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>


非常感谢大家的提前帮助。

最佳答案

交换图像源使问题变得更加复杂。尝试使用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函数或事件侦听器中。

关于javascript - Javascript-嵌套列表不会扩展,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20541773/

10-09 18:08
查看更多