您的位置：首页 > 其它

垂直导航，点击事件

2016-05-18 09:38 295 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作菜单</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>

$(document).ready(function(e){
//点击弹出隐藏内容
$(".p1").click(function(){
$(".u1").toggle(1000);
$(".u2,.u3,.u4,.u5:visible").hide(1000);
});
$(".p2").click(function(){
$(".u2").toggle(1000);
$(".u1,.u3,.u4,.u5:visible").hide(1000);
});
$(".p3").click(function(){
$(".u3").toggle(1000);
$(".u2,.u1,.u4,.u5:visible").hide(1000);
});
$(".p4").click(function(){
$(".u4").toggle(1000);
$(".u2,.u3,.u1,.u5:visible").hide(1000);
});
$(".p5").click(function(){
$(".u5").toggle(1000);
$(".u2,.u3,.u4,.u1:visible").hide(1000);
});

//给li加背景颜色
$("li").hover(
function(){$(this).addClass("cc")},
function(){$(this).removeClass("cc")});
});

</script>
</head>
<style>
*{ margin:0px; padding: 0px;}
.all{ width: 200px;margin: 0px auto;  }
.dis{ display:block;}
.cc{ background-color: #939393;}
p{ border: 1px solid black; padding: 5px;text-align: center;}
ul { display: none; border: 1px solid black;}
li{ list-style:none;text-align: center; height: 30px; line-height: 30px;}

</style>
<body>
<div class="all">
<p class="p1">文学馆</p>
<ul class="u1">
<li>文学</li>
<li>小说</li>
<li>青春文学</li>
<li>传记</li>
<li>动漫</li>
</ul>
<p class="p2">少儿馆</p>
<ul class="u2">
<li>儿童文学</li>
<li>绘本</li>
<li>科普百科</li>
<li>幼儿启蒙</li>
<li>智力开发</li>
<li>手工游戏</li>
<li>动漫卡通</li>
<li>玩具书</li>
</ul>
<p class="p3">教育馆</p>
<ul class="u3">
<li>中小学教辅</li>
<li>外语学习</li>
<li>考试</li>
<li>大中专教材</li>
<li>字典词典/工</li>
</ul>
<p class="p4">社科馆</p>
<ul class="u4">
<li>历史</li>
<li>心理学</li>
<li>国学古籍</li>
<li>文化</li>
<li>哲学宗教</li>
<li>政治军事</li>
<li>法律</li>
<li>社会科学</li>
</ul>
<p class="p5">计算机馆</p>
<ul class="u5">
<li>编程语言</li>
<li>办公软件</li>
<li>图形图像</li>
<li>网页制作</li>
<li>网络与通信</li>
<li>数据库</li>
<li>操作系统</li>
<li>更多分类</li>
</ul>

</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航