如果是这个效果,你有两个错误:
1:你最大的那个无序列表<ul>少了 闭合标签,即</ul>,你自己检查一下.
2:在css里加.collapsed{display:none}
如果不是,就不清楚了..............................
前几天用非常规方法实现了一个山寨版树形菜单。。。如下。。。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function display(jia,zi) {
if(document.getElementById(jia).innerHTML== '+'){
document.getElementById(zi).style.display=""
document.getElementById(jia).innerHTML= '-'
return
}
if(document.getElementById(jia).innerHTML== '-'){
document.getElementById(zi).style.display= 'none'
document.getElementById(jia).innerHTML= '+'
return
}
}
function exit(){
//window.location.href='../ht.jsp'
//alert('您已安全退出')
}
</script>
<style type="text/css">
.juli{margin-top:20px<br> border:none<br> }
.neijuli{
padding-top:8px
line-height:1.5em
font-size:23px
}
.fuhao { border:1px solid white
color:#FFFFFF
}
body {
background-color: #7A99E0
font-size:25px
}
.txtc{color:#FFFFFF}
.smalltxt{font-size:17px}
a{text-decoration:none}
</style> </head>
<body>
<div class="smalltxt txtc" style="margin-bottom:30px">
系统后台管理面板
</div><!--开始部分===================================== -->
<span class="smalltxt txtc"><a href="admin/loginout.jsp" target="_top" style="color:white">[安全退出]</a> <a href="index.jsp" style="color:white" target="_top">[返回首页]</a></span><!-- 商品管理开始================================ -->
<div id="sp" name="sp" class="juli">
<span id="jia" class="fuhao" >+</span>
<a style="cursor:hand" onClick="display('jia','zi')" class="txtc">商品管理</a>
<!-- 子菜单 -->
<div id="zi" name="zi" class="neijuli" style="display:none">
<a href="admin/addpro.jsp" target="mainFrame">添加商品</a><br>
<a href="admin/controlpro.jsp" target="mainFrame">管理商品</a>
</div>
</div>
<hr class="txtc"><!--新闻管理开始================================= -->
<div id="xw" name="xw" class="juli" >
<span id="jia1" class="fuhao">+</span>
<a style="cursor:hand" onClick="display('jia1','zi1')" class="txtc">新闻管理</a>
<!-- 子菜单 -->
<div id="zi1" class="neijuli" style="display:none">
<a href="admin/addnews.jsp" target="mainFrame">添加新闻</a><br>
<a href="admin/controlnews.jsp" target="mainFrame">管理新闻</a>
</div>
</div>
<hr class="txtc"><!--留言管理开始================================== -->
<div id="ly" name="ly" class="juli">
<span id="jia2" class="fuhao">+</span>
<a style="cursor:hand" onClick="display('jia2','zi2')" class="txtc">系统管理</a>
<!-- 子菜单 -->
<div id="zi2" class="neijuli" style="display:none">
<a href="#">关闭系统</a><br>
<a href="#">XXX</a>
</div>
</div>
<hr class="txtc">
</body>
</html>
