asp.net 折叠菜单，我想做一个网页左边是折叠菜单，点击左边右边出现内容的那种折叠式菜单
就像图片上那种，刚开始增加和管理师隐藏的，我用站点地图实现了，请问还有其他方法吗？站点地图一个网站中只能用一个吗？？？...
就像图片上那种，刚开始增加和管理师隐藏的，我用站点地图实现了，请问还有其他方法吗？站点地图一个网站中只能用一个吗？？？
展开
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<head runat="server">
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu_top").click(function(){
var self = $(this).parent().find(".menu_son");
if(self.css('display')=="none"){
$(this).parent().parent().find(".menu_son").slideUp();
self.slideToggle("slow");
}
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;border:0; font-family:宋体; font-size:14px; color:black;line-height:22px;}
ul li{ line-height:22px;list-style:none;color:#cfcfcf;}
.menu_top{display:block;color:#8f8f8f; background-image:url('img/bbg.gif');height:33px;line-height:33px}
.menu_son{display:none;}
#img_move_alt *{color:white;font-size:9pt; font-family:宋体}
</style>
<title>无标题页</title>
</head>
<body>
<div style="width: 800px; text-align: center; margin-left: auto; margin-right: auto;padding-top:15px; ">
<div class="left" style="width: 156px; float: left; border: 1px solid #ccc">
<div>
<div class="menu_top">
菜单1
</div>
<div class="menu_son" style="display:block">
<ul>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
</ul>
</div>
</div>
<div>
<div class="menu_top">
菜单2
</div>
<div class="menu_son">
<ul>
<li>menu1 </li>
<li>menu3 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu3 </li>
</ul>
</div>
</div>
<div>
<div class="menu_top">
菜单3
</div>
<div class="menu_son">
<ul>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
</ul>
</div>
</div>
</div>
</body>
</html>
jq.js是Jquery-1.2.6.js
你去下载个,之前写这玩的...测试没问题
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<head runat="server">
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu_top").click(function(){
var self = $(this).parent().find(".menu_son");
if(self.css('display')=="none"){
$(this).parent().parent().find(".menu_son").slideUp();
self.slideToggle("slow");
}
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;border:0; font-family:宋体; font-size:14px; color:black;line-height:22px;}
ul li{ line-height:22px;list-style:none;color:#cfcfcf;}
.menu_top{display:block;color:#8f8f8f; background-image:url('img/bbg.gif');height:33px;line-height:33px}
.menu_son{display:none;}
#img_move_alt *{color:white;font-size:9pt; font-family:宋体}
</style>
<title>无标题页</title>
</head>
<body>
<div style="width: 800px; text-align: center; margin-left: auto; margin-right: auto;padding-top:15px; ">
<div class="left" style="width: 156px; float: left; border: 1px solid #ccc">
<div>
<div class="menu_top">
菜单1
</div>
<div class="menu_son" style="display:block">
<ul>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
</ul>
</div>
</div>
<div>
<div class="menu_top">
菜单2
</div>
<div class="menu_son">
<ul>
<li>menu1 </li>
<li>menu3 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu3 </li>
</ul>
</div>
</div>
<div>
<div class="menu_top">
菜单3
</div>
<div class="menu_son">
<ul>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
<li>menu1 </li>
<li>menu2 </li>
<li>menu3 </li>
<li>menu4 </li>
</ul>
</div>
</div>
</div>
</body>
</html>
jq.js是Jquery-1.2.6.js
你去下载个,之前写这玩的...测试没问题
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
引一个JQUERY的包,在点击事件里调用对象的toggle()方法,就可以实现隐藏与展现.
比如你把一些元素或控件放到一个<div id="dID" class="cID">里,
那么通过$("#dID").toggle()或者$(".cID").toggle()都可以实现点一下隐藏再点一下显示的效果.
比如你把一些元素或控件放到一个<div id="dID" class="cID">里,
那么通过$("#dID").toggle()或者$(".cID").toggle()都可以实现点一下隐藏再点一下显示的效果.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以到网上下载 左侧菜单模板 多得很
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
