Jquery實現下拉菜單案例
本文實例為大傢分享瞭Jquery實現下拉菜單的具體代碼,供大傢參考,具體內容如下
需要實現的結構如下圖:
關於佈局:
佈局采用ul裡面包含4個li,li裡面包含a標簽(微博)以及ul(下面的下拉菜單),采用hover改變移動到下拉菜單後背景變色。
關於功能:
首先利用jquery獲取元素,然後給li添加mouseenter方法顯示下面的下拉菜單,然後給li添加mouseleave方法離開後又隱藏下拉菜單。
最終代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jq下拉菜單</title> <script src="./js/jquery.min.js"></script> <style lang=""> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: black; } .nav { margin: 100px 500px; float: left; font-size: 12px; } .nav>li { float: left; text-align: center; } .nav>li a { display: block; padding: 10px 21px; } .nav>li ul li { cursor: pointer; padding: 10px 20px; border-left: 1px solid #efd8af; border-right: 1px solid #efd8af; border-bottom: 1px solid #efd8af; } .nav>li ul { display: none; } .nav>li ul li:hover { background-color: #fff4d8; } </style> </head> <body> <script> $(function() { // 鼠標經過nav裡面的li $('.nav>li').mouseenter(function() { // 顯示下面的下拉菜單 $(this).children('ul').show(); }); // 鼠標離開後又隱藏 $('.nav>li').mouseleave(function() { $(this).children('ul').hide(); }) }) </script> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>評論</li> <li>@我</li> </ul> </li> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>評論</li> <li>@我</li> </ul> </li> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>評論</li> <li>@我</li> </ul> </li> <li> <a href="#">微博</a> <ul> <li>私信</li> <li>評論</li> <li>@我</li> </ul> </li> </ul> </body> </html>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。