jquery中怎么实现多级菜单动态效果
1个回答
2017-12-19 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的菜单</title>
<style>
div {
margin:5px;
padding: 5px;
float:right;
width:80%;
background-color:#fff;
}
.menu_container {
float:left;
width:20%;
margin:0 auto;
text-align:left;
}
.level_one_menu {
background-color:#ccc;
}
.level_two_menu {
background-color:#cdd;
display:none;
}
.level_three_menu {
background-color:#dcc;
display:none;
}
</style>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.level_two_menu').bind("click",function(){
$(".level_three_menu",this).toggle();
return false;
})
$('.level_one_menu').bind("click",function(event){
$(".level_two_menu",this).toggle();
event.stopPropagation();
})
$('.level_three_menu').bind("click",function(event){
alert($(this).text());
event.stopPropagation();
})
$('.level_one_menu:eq(0) > .level_two_menu').show();
$('.level_two_menu:eq(0) > .level_three_menu').show();
});
</script>
</head>
<body>
<div class="menu_container">
<div class="level_one_menu">计算机分类
<div class="level_two_menu">编程语言
<div class="level_three_menu">Java</div>
<div class="level_three_menu">.net</div>
<div class="level_three_menu">C/C++</div>
<div class="level_three_menu">PHP</div>
<div class="level_three_menu">Python</div>
<div class="level_three_menu">Javascript</div>
<div class="level_three_menu">Object-C</div>
<div class="level_three_menu">Perl</div>
<div class="level_three_menu">Shell</div>
</div>
<div class="level_two_menu">操作系统
<div class="level_three_menu">Linux</div>
<div class="level_three_menu">Windows</div>
<div class="level_three_menu">Mac</div>
<div class="level_three_menu">Unix</div>
</div>
<div class="level_two_menu">数据库
<div class="level_three_menu">Mysql</div>
<div class="level_three_menu">Oracle</div>
<div class="level_three_menu">DB2</div>
<div class="level_three_menu">PostgreSQL</div>
<div class="level_three_menu">MS SQL Server</div>
<div class="level_three_menu">Sybase</div>
</div>
</div>
<div class="level_one_menu">出版社分类
<div class="level_two_menu">Addison-Wesley</div>
<div class="level_two_menu">Apress</div>
<div class="level_two_menu">Dummies</div>
<div class="level_two_menu">friendsofED</div>
<div class="level_two_menu">JohnWiley</div>
<div class="level_two_menu">Manning</div>
<div class="level_two_menu">McGraw</div>
<div class="level_two_menu">NewRiders</div>
<div class="level_two_menu">NoStarch</div>
<div class="level_two_menu">OReilly</div>
<div class="level_two_menu">Packt</div>
<div class="level_two_menu">Pearson</div>
<div class="level_two_menu">Pragmatic</div>
<div class="level_two_menu">Prentice</div>
<div class="level_two_menu">Que</div>
<div class="level_two_menu">Sams</div>
<div class="level_two_menu">SitePoint</div>
<div class="level_two_menu">SYBEX</div>
<div class="level_two_menu">Syngress</div>
<div class="level_two_menu">Wrox</div>
</div>
<div class="level_one_menu">出版日期分类
<div class="level_two_menu">2015</div>
<div class="level_two_menu">2014</div>
<div class="level_two_menu">2013</div>
<div class="level_two_menu">2012</div>
<div class="level_two_menu">2011</div>
<div class="level_two_menu">2010</div>
<div class="level_two_menu">2009</div>
<div class="level_two_menu">2008</div>
<div class="level_two_menu">2007</div>
<div class="level_two_menu">2006</div>
<div class="level_two_menu">2005</div>
<div class="level_two_menu">2004</div>
<div class="level_two_menu">2003</div>
<div class="level_two_menu">2002</div>
<div class="level_two_menu">2001</div>
<div class="level_two_menu">2000</div>
<div class="level_two_menu">2000年之前</div>
</div>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
