實例：用jQuery實現垂直和水平下拉菜單

時間 2019-11-17

原文原文鏈接

主要是利用jQuery來實現垂直菜單和水平菜單。實現效果如圖：javascript

第一步，建立一個HTML文件，如圖，包含兩個ul。固然把jquery庫也引入進去了。css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="app.css" type="text/css">
    <title>menu</title>
</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>
    <br/>
    <br/>
    <br/>
    <!--水平菜單-->
    <ul>
        <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>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

menu.html

第二步，給菜單設置樣式，包括顏色，背景圖片，a標籤等等的樣式。html

ul,li{
    list-style: none;
}
ul{
    padding: 0;
    margin: 0;
}
.main,.hmain{
    background-image:url(img/1.png) ;
    background-repeat: repeat-x;
    width: 100px;
}
li{
    background-color: #cccccc;
}
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("img/y.png");
    background-repeat: no-repeat;
    background-position: 3px center;
}
.main li a,.hmain li a{
    color: black;
    background-image: none;
}
.main ul,.hmain ul{
    display:none;
}
.hmain{
    float: left;
    margin-right: 1px;
}

app.css

第三步，就是利用jQuery給菜單設置響應效果了。其中，垂直菜單的原理是：當點擊這個a標籤時，把子菜單的display屬性變爲block，再次點擊，更改成none。這裏能夠用if-else的條件判斷，而後設置css（）方法，或者用hide/show/toggle，slideDown/slideUp方法。而水平菜單，用到的是hover屬性，劃過ul時的效果顯示狀態。java

最後就是小圖標的變化。用css修改方法便可。jquery

$(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.show();
       //ulNode.hide();
       //ulNode.toggle(3000);//數字，slow，normal，fast
       //ulNode.slideDown();
       //ulNode.slideUp();
       ulNode.slideToggle();
       changeIcon($(this));
   });
    $(".hmain").hover(function(){
        $(this).children("ul").slideDown();
        changeIcon($(this).children("a"));
    },function(){
        $(this).children("ul").slideUp();
        changeIcon($(this).children("a"));
    })
});
function changeIcon(mainNode){
    if(mainNode.css("background-image").indexOf("y.png")>=0){
        mainNode.css("background-image","url('img/x.png')");
    }else{
        mainNode.css("background-image","url('img/y.png')");
    }
}