编程论坛 → JavaScript论坛

求一个js实现对无序列表的“展开/收缩”？

gu_tong2008 发布于 2010-06-13 10:35， 1142 次点击

有没有人能用javascript帮我解决这个问题，代码形如：
            <li><a onclick="jsfun()"展开/收缩</a>
                <ul>
                <li class="Child"><a a.html" target="right" >子列表1</a></li>
                <li class="Child"><a b.html" target="right" >子列表2</a></li>
                <li class="Child"><a c.html" target="right" >子列表3</a></li>
               </ul>
             </li>
当我点击一次"展开/收缩"的时候，它后面的无序列表展开，当我再次点击"展开/收缩"的时候，它后面的无序列表收缩，.......如此循环，就是要实现"jsfun()"函数，能否举个例子实现，先谢过了。

[ 本帖最后由 gu_tong2008 于 2010-6-13 11:27 编辑 ]

1 回复

#2

gupiao1752010-06-13 18:32

<script language="javascript">
function jsfun()
{
   document.getElementById("ChildUL").style.display=(document.getElementById("ChildUL").style.display=='none')?'block':'none';
}
</script>
<li onclick="jsfun()" style="list-style:none;text-indent:5px;background:#f4f4f4;border-right:1px solid #000;border-bottom:1px solid #000;width:150px;height:30px;line-height:30px;"><a>展开/收缩< /a></li>
<li id="ChildUL" style="list-style:none;display:none;">
   <ul style="list-style:none;">
      <li class="Child" style="padding:3px;"><a a.html" target="right" >子列表1</a></li>
      <li class="Child" style="padding:3px;"><a b.html" target="right" >子列表2</a></li>
      <li class="Child" style="padding:3px;"><a c.html" target="right" >子列表3</a></li>
   </ul>
</li>

1