垂直导航，点击事件

来源：互联网发布：mac驱动精灵怎么用编辑：程序博客网时间：2024/06/05 05:38
<!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>
0 0