div+css问题 js树形菜单 展开变成减号 闭合是加号 怎么实现的
1个回答
展开全部
前几天用非常规方法实现了一个山寨版树形菜单。。。如下。。。<!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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
