web前端學習（五）（9）-- jQuery選單
阿新 • • 發佈：2018-12-15
1、垂直選單佈局
2、垂直選單實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $(".main>a").click(function(){ var ulNode = $(this).next("ul"); // if(ulNode.css("display")=="none"){ // ulNode.css("display", "block"); // }else{ // ulNode.css("display","none"); // }/*這種方法有些繁瑣。*/ // ulNode.hide();/*隱藏*/// ulNode.show();/*顯示*/ //ulNode.toggle(500);/*顯示/隱藏 這種是相對上面方便的方法*/ /* * 數字、slow、normal、fast * */ // ulNode.slideDown(); // ulNode.slideUp();//這兩種方法也需要自己進行判斷。ulNode.slideToggle();//這種方法就不需要自己進行判斷了。 });/*用尖角號防止點選子選單也會執行上面函式*/ }); </script> <style> ul,li{ list-style: none; } ul{ padding:0px;/*覆蓋子選單的縮排*/ margin:0px;/*防止ie瀏覽器的問題。*/ } .main{ background-image: url("images/title.gif"); background-repeat: repeat-x; width:100px; } li{ background-color:#eeeeee; } a{ text-decoration: none; padding-left:20px; display:block; width:80px; padding-top:3px; padding-bottom:3px; } .main>a{ color:white; background-image: url("images/collapsed.gif"); background-repeat:no-repeat; background-position:3px center;/*距離左面3px，垂直方向居中*/ } .main li a{ color:black; background-image:none; } .main ul{ display:none; } </style> </head> <body> <ul> <li class="main"> <a href="#">選單1</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> <li class="main"> <a href="#">選單2</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> <li class="main"> <a href="#">選單3</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> </ul> </body> </html>
3、水平選單的實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function () { isClick = 1; /*為了防止多次點選而設定的變數*/ $(".main>a").click(function () { // 這裡有個非常nice的寫法：$(".main>a,.hmain>a").click(function(){ // if (isClick) { // isClick = 0; var ulNode = $(this).next("ul"); ulNode.stop(true,false).slideToggle();/*詳情查詢stop函式的用法啊，取消回撥函式，兩個引數第一個引數決定是否取消當前正在執行的動畫， 第二個引數決定是否立即完成當前正在執行的動畫。 我們在這裡使用的動畫效果不足以用到第一個引數，所以這裡true和false都是可以的。
這裡實現瞭如何避免動畫重複的功能
*/ /*插兩個標籤：hover、stop標籤*/ changeIcon($(this)); // setTimeout(function () { // isClick = 1; // }, 1000); // /*如何處理多次點選造成的之後一直執行動作的方法。 // 這裡用的是toggle()函式所以沒法分開兩個動作的處理 // 比如在還沒展開完畢的時候再次點選沒有實現直接收回動作。*/ // } }); // $(".hmain").hover(function(){ // $(this).children("ul").slideToggle(); // });//這是一種比較簡單的方法，下面還有一種很奇妙的方法，給hover兩個函式物件作為引數。 isHover = 1; /*為了防止多次點選而設定的變數*/ $(".hmain").hover(function () { $(this).children("ul").stop(false,false).slideDown(500); changeIcon($(this).children("a")); /*點選的是main的子元素a標籤之後執行的動作。*/ } , function () { $(this).children("ul").stop(false,false).slideUp(500); changeIcon($(this).children("a")); } ); /*jQuery官方文件中有介紹，這是有兩個引數時的方法。 一個引數是滑鼠放上去的時候有的動作，第二個引數時滑鼠離開時將要執行的動作。*/ }); function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("collapse.gif") >= 0) {/*indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。*/ mainNode.css("background-image", "url('images/expanded.gif')"); } else { mainNode.css("background-image", "url('images/collapse.gif')"); } } } </script> <style> ul, li { list-style: none; } ul { padding: 0px; /*覆蓋子選單的縮排*/ margin: 0px; /*防止ie瀏覽器的問題。*/ } .main, .hmain { background-image: url("images/title.gif"); background-repeat: repeat-x; width: 100px; } li { background-color: #eeeeee; } a { text-decoration: none; padding-left: 20px; display: block; width: 80px; padding-top: 3px; padding-bottom: 3px; } .main > a, .hmain > a { color: white; background-image: url("images/collapsed.gif"); background-repeat: no-repeat; background-position: 3px center; /*距離左面3px，垂直方向居中*/ } .main li a, .hmain li a { color: black; background-image: none; } .main ul, .hmain ul { display: none; } .hmain { float: left; margin-right: 3px; } </style> </head> <body> <ul> <li class="main"> <a href="#">選單1</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> <li class="main"> <a href="#">選單2</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> <li class="main"> <a href="#">選單3</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> <br/> <li class="hmain"> <a href="#">選單1</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> <li class="hmain"> <a href="#">選單2</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> <li class="hmain"> <a href="#">選單3</a> <ul> <li><a href="">子選單1</a></li> <li><a href="">子選單2</a></li> </ul> </li> </ul> </body> </html>