Question

好。所以我有一个这样的列表（基本上） 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>

非常感谢你们提前帮助。

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函数或事件监听器中。

Javascript-嵌套列表不会扩展

1 个答案: