...做一个网页左边是折叠菜单,点击左边右边出现内容的那种折叠式菜单...

发布网友 发布时间:2022-04-23 12:39

我来回答

3个回答

热心网友 时间:2022-04-21 00:14

<!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
你去下载个,之前写这玩的...测试没问题

热心网友 时间:2022-04-21 01:32

引一个JQUERY的包,在点击事件里调用对象的toggle()方法,就可以实现隐藏与展现.
比如你把一些元素或控件放到一个<div id="dID" class="cID">里,
那么通过$("#dID").toggle()或者$(".cID").toggle()都可以实现点一下隐藏再点一下显示的效果.

热心网友 时间:2022-04-21 03:07

你可以到网上下载 左侧菜单模板 多得很

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com