<!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>
垂直导航,点击事件
最新推荐文章于 2020-09-19 13:17:42 发布