竖直手风琴导航菜单栏
生活随笔
收集整理的這篇文章主要介紹了
竖直手风琴导航菜单栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
之前有用原生js實現了菜單欄的展開收縮效果，今天用jquery實現這個效果，
并增加了鼠標點擊箭頭方向改變的效果。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.2.0.min.js"></script><style>li {list-style-type: none;}.frame {width: 200px;margin: 20px auto; } .frame .nav {background: black;color: white;padding: 5px; } .nav .label{padding: 5px 10px ; } .nav .arrow{display:block;width:16px;height:16px;background:no-repeat center;float:right;}.arrow.up{background-image:url(images/arrow_u.png);}.arrow.down{background-image:url(images/arrow_d.png);}.menu{background: gainsboro;display:none;}.menu li {/* border: 1px solid;*/margin-left: -20px;}.show {display: block;}</style> </head> <body> <ul class="frame"><li><div class="nav"><span class="label">水果</span><span class="arrow down"></span></div><ul class="menu show"><li>葡萄</li><li>栗子</li></ul></li><li><div class="nav"><span class="label">糖果</span><span class="arrow up"></span></div><ul class="menu"><li>巧克力</li><li>太妃糖</li></ul></li> </ul> <script>$(".nav").click(function () {var arrow = $(this).find(".arrow");if(arrow.hasClass("up")){arrow.removeClass("up").addClass("down");}else if(arrow.hasClass("down")){arrow.removeClass("down").addClass("up");}//改變箭頭的方向$(this).parent().find(".menu").slideToggle();//改變二級導航菜單的顯示狀態 }) </script> </body> </html>?
轉載于:https://www.cnblogs.com/iriliguo/p/6739678.html
總結
以上是生活随笔為你收集整理的竖直手风琴导航菜单栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java后端，应该日常翻看的中文技术网站
- 下一篇： 2Python全栈之路系列之基于sock