jQuery實現可收縮展開的級聯菜單實例代碼

2019-11-20 21:34:43

字體：大中小

來源：轉載

供稿：網友

如果用純JavaScript代碼而不使用框架的話，那么做一個級聯菜單也許是一件讓人生畏的事情，但有了框架，這件事情就很容易了，這就是框架的好處，極大地提高了開發效率，并且更可靠和易于維護。使用jQuery來實現級聯菜單的一般步驟如下：

•1.首先使用<ul>和<li>創建一個級聯菜單

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>itcast.cn的JQuery應用示例：彈出菜單</title>
  <link type="text/css" rel="stylesheet" href="css/menu.css" mce_href="css/menu.css" />
  <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
  <mce:script type="text/javascript" src="jslib/jquerymenu.js" mce_src="jslib/jquerymenu.js"></mce:script>
</head>
<body>
    <ul>
        <a href="#" mce_href="#">我是菜單1</a>
        <li><a href="#" mce_href="#">我是子菜單1</a></li>
        <li><a href="#" mce_href="#">我是子菜單2</a></li>
    </ul>
    <ul>
        <a href="#" mce_href="#">我是菜單2</a>
        <li><a href="#" mce_href="#">我是子菜單3</a></li>
        <li><a href="#" mce_href="#">我是子菜單4</a></li>
    </ul>
</body>
</html>

•2.編寫JavaScript代碼，控制級聯菜單的收縮

復制代碼代碼如下:

//需要點擊主菜單的按鈕時，對應的子菜單可以顯示，再次點擊子菜單則隱藏
//需要編寫代碼，在頁面裝載時，給所有的主菜單添加onclick的事件
//保證主菜單點擊時可以顯示或隱藏子菜單
//注冊頁面裝載時執行的方法
$(document).ready(function() {
    //這里需要首先找到所有的主菜單
    //然后給所有的主菜單注冊點擊事件
    //找到ul中的節點
    var as = $("ul > a");
    as.click(function() {
        //這里需要找到當前ul中的li，然后讓li顯示出來
        //獲取當前被點擊的a節點
        var aNode = $(this);
        //找到當前a節點的所有li兄弟字節點
        var lis = aNode.nextAll("li");
        //讓子節點顯示或隱藏
        lis.toggle("show");
    });
});

•創建css文件，來控制標簽的顯示效果

復制代碼代碼如下:

/*如何讓所有的li都不顯示小圓點，可以使用css的標簽選擇器*/
li {
    list-style: none; /*使li前面的小圓點消失*/
    margin-left: 18px; /*讓子菜單向右移動一段距離，達到縮進的效果*/
    display: none; /*讓所有的子菜單都先隱藏*/
}
a{
  text-decoration: none; /*讓鏈接的下劃線消失*/
}

jQuery帶來的方便：

1.在找被點擊的菜單時，僅需要一個$(this)就可以實現

2.節點的顯示與隱藏，只用一條語句：toggle()就可以，并且還可以在數組上實現所有節點都具有這種功能。

3.找到某個標簽下所有的某種標簽：$("ul > a")

上一篇：Google Dart編程語法和基本類型學習教程

下一篇：利用JavaScript實現新聞滾動效果(實例代碼)