jquery、CSS3----多个导航条下拉

最新推荐文章于 2022-07-29 10:06:25 发布

AsaZyf

最新推荐文章于 2022-07-29 10:06:25 发布

阅读量223

点赞数

分类专栏：网页文章标签： CSS3 jquery 导航条下拉

本文链接：https://blog.csdn.net/AsaZyf/article/details/83111380

版权

css3 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

网页

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>CSS3实现导航条下拉效果</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           .nav {
               width: 500px;
               height: 40px;
               margin: 0 auto;
               display: flex;
           }

           .nav .item {
               width: 120px;
               height: 40px;
               line-height: 40px;
               text-align: center;
               background: #ddd;
               position: relative;
               margin-right: 5px;
           }

           .nav .item>a {
               display: block;
               text-decoration: none;
               color: cornflowerblue;
           }

           .nav .item>.list {
               display: none;
           }

           .nav .item>.list .item-list {
               background: #d3e9d3;
               height: 40px;
               /*overflow: hidden;*/
           }

           .nav .item>.list .item-list a {
               display: block;
               text-decoration: none;
               color: #1befef;
           }

           #sider {
               display: inline-block;
               width: 0;
               height: 0;
               border-top: 8px solid #0000004a;
               border-right:8px solid transparent;
               border-left: 8px solid transparent;
               transform: rotate(-90deg);
           }
       </style>
       <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
   </head>

</div>

           </div>
       </div>
       <script>
           var a=true

           $(".item").click(function() {
               if (a) {
                   $(this).find("i").css("transform","rotate(0)")
                   a=false
               } else{
                   $(this).find("i").css("transform","rotate(-90deg)")
                   a=true
               }
               $(this).parent().find(".list").toggle(100)
               $(this).siblings(".item").find(".list").hide()
           })
       </script>
   </body>

</html>

效果图：

AsaZyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery、CSS3----多个导航条下拉

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3实现导航条下拉效果&lt;/title&gt; &lt;style&gt; * {
复制链接

扫一扫

专栏目录