利用jquery實現導航欄
阿新 • • 發佈：2019-02-11
利用jquery+css實現導航欄：
js程式碼如下：
$(document).ready(function(){ $(".levael2").hide(); var i = 1; $(".level1 > a").click(function(){ if(i%2==0){ $(this).removeClass("current") .next().hide() .parent().siblings().children("a").removeClass("current") .next().hide(); }else{ $(this).addClass("current") .next().show() .parent().siblings().children("a").removeClass("current") .next().hide(); } i++; return false; }); });
前臺html程式碼如下：
<html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="test.js" type="text/javascript"></script> <style type="text/css"> ul li {list-style:none;} </style> </head> <body> <div class="box"> <ul class="menu"> <li class="level1"> <a href="">襯衫</a> <ul class="levael2"> <li><a href=""> a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li class="level1"> <a href="">衛衣</a> <ul class="levael2"> <li><a href=""> a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> </ul> </div> </body> </html>