本文實例講述了jquery實現點擊向下展開菜單項(伸縮導航)效果。分享給大家供大家參考。具體如下：
這里演示基于jquery打造的向下展開的多級導航條效果，縱向垂直排列，風格非常的簡潔，鼠標點擊時候展開菜單的二級項，再次點擊的時候又向上合攏，平時只顯示一級菜單，二級菜單是隱藏不顯示的，代碼簡潔，包括了完整的JS、css和jquery部分。
運行效果如下圖所示：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-show-hidden-style-menu-codes/
具體代碼如下：
<html><head><title>可折疊展開的導航條</title><style>body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"/5b8b/4f53","Arial Narrow";background:#fff;}form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}input,select{font-size:12px;line-height:16px;}img{border:0;}ul,li{list-style-type:none;}a {color:#00007F;text-decoration:none;}a:hover {color:#bd0a01;text-decoration:underline;}.box {width: 150px;margin: 0 auto;}.menu{overflow:hidden;border-color: #C4D5DF;border-style: solid;border-width: 0 1px 1px;}/* lv1 */.menu li.level1 a{display: block;height: 28px;line-height: 28px; background:#EBF3F8;font-weight:700;color: #5893B7;text-indent: 14px;border-top: 1px solid #C4D5DF;}.menu li.level1 a:hover{text-decoration:none;}.menu li.level1 a.current{background:#B1D7EF;}/* lv2 */.menu li ul{overflow:hidden;}.menu li ul.level2{display:none;}.menu li ul.level2 li a{display: block;height: 28px;line-height: 28px;background:#ffffff;font-weight:400;color: #42556B;text-indent: 18px;border-top: 0px solid #ffffff;overflow: hidden;}.menu li ul.level2 li a:hover{color:#f60;}</style><script src="jquery-1.6.2.min.js"></script><script>$(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current") //給當前元素添加"current"樣式 .next().show() //下一個元素顯示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"樣式 .next().hide(); //它們的下一個元素隱藏 return false; });});</script></head><body><div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">襯衫</a> <ul class="level2"> <li><a href="#none">短袖襯衫</a></li> <li><a href="#none">長袖襯衫</a></li> <li><a href="#none">短袖T恤</a></li> <li><a href="#none">長袖T恤</a></li> </ul> </li> <li class="level1"> <a href="#none">衛衣</a> <ul class="level2"> <li><a href="#none">開襟衛衣</a></li> <li><a href="#none">套頭衛衣</a></li> <li><a href="#none">運動衛衣</a></li> <li><a href="#none">童裝衛衣</a></li> </ul> </li> <li class="level1"> <a href="#none">褲子</a> <ul class="level2"> <li><a href="#none">短褲</a></li> <li><a href="#none">休閑褲</a></li> <li><a href="#none">牛仔褲</a></li> <li><a href="#none">免燙卡其褲</a></li> </ul> </li> </ul></div></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
