jquery导航

最新推荐文章于 2021-03-12 21:47:24 发布

zhanghl150426

最新推荐文章于 2021-03-12 21:47:24 发布

阅读量327

点赞数

分类专栏：典型小案例文章标签： jquery导航

本文链接：https://blog.youkuaiyun.com/zhanghl150426/article/details/82150433

版权

典型小案例专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style type="text/css">
       *{padding:0;margin:0;}
       ul,ol{list-style:none;}
       .nav{
           width:400px;
           margin:0px auto;
           margin-top:20px;
           border:1px solid #ccc;
           height:40px;
       }
       .nav li{
           float:left;
           width:100px;
           text-align:center;
           line-height: 40px;
       }
       .nav li a{
           display:block;
       }
       .nav li ol{
           display:none;
       }
       .nav li ol li{
           background:orange;
       }
   </style>
</head>
<body>
   <ul class="nav">
       <li>
           <a href="#">首页</a>
           <ol>
               <li>首页1</li>
               <li>首页1</li>
               <li>首页1</li>
               <li>首页1</li>
           </ol>
       </li>
       <li>
           <a href="#">娱乐</a>
           <ol></ol>
       </li>
       <li>
           <a href="#">新闻</a>
           <ol>
               <li>新闻1</li>
               <li>新闻1</li>
               <li>新闻1</li>
           </ol>
       </li>
       <li>
           <a href="#">资讯</a>
           <ol>
               <li>资讯1</li>
               <li>资讯1</li>
           </ol>
       </li>
   </ul>
</body>
   <script type="text/javascript" src="js/jquery1.7.js"></script>
   <script type="text/javascript">
       //鼠标滑过导航，显示当前，其它收起隐藏
       //鼠标离开，所有都收起隐藏
       // $(".nav li a").mouseover(function(){
       //    $(".nav ol").slideUp(100);
       //    $(this).siblings('ol').slideDown(100);
       // }).mouseout(function(){
       //    $(".nav ol").slideUp(100);
       // })

       $(".nav li a").hover(function(){
           $(".nav ol").slideUp(100);
           $(this).siblings('ol').slideDown(100);
       },function(){
           $(".nav ol").slideUp(100);
       })
   </script>
</html>