1. 程式人生 > >web前端學習(五)(9)-- jQuery選單

web前端學習(五)(9)-- jQuery選單

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>