编程论坛 → ASP技术论坛

js实现折叠与展开的一个问题！

gu_tong2008 发布于 2010-06-13 11:06， 573 次点击

有没有人能用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:26 编辑 ]

2 回复

#2

yms1232010-06-13 14:28

<script language="javascript">
function jsfun()
{
   if(document.getElementById("ChildUL").style.display=="")
      document.getElementById("ChildUL").style.display="none";
   else
      document.getElementById("ChildUL").style.display="";
}
</script>
<li><a onclick="jsfun()">展开/收缩</a>
   <ul id="ChildUL">
      <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>

#3

gupiao1752010-06-13 15:49

<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>
改了一下，这样也可以，不管你的onclick代码放在哪都能实现类似效果，用任何标签，div,span等等都行，核心就是用JS去控制style对象的display属性，这种代码在树结构里用得比较多！

1