如果用純JavaScript代碼而不使用框架的話，那么做一個(gè)級(jí)聯(lián)菜單也許是一件讓人生畏的事情，但有了框架，這件事情就很容易了，這就是框架的好處，極大地提高了開(kāi)發(fā)效率，并且更可靠和易于維護(hù)。使用jQuery來(lái)實(shí)現(xiàn)級(jí)聯(lián)菜單的一般步驟如下：

•1.首先使用<ul>和<li>創(chuàng)建一個(gè)級(jí)聯(lián)菜單

復(fù)制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>itcast.cn的JQuery應(yīng)用示例：彈出菜單</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.編寫(xiě)JavaScript代碼，控制級(jí)聯(lián)菜單的收縮

復(fù)制代碼代碼如下:

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

•創(chuàng)建css文件，來(lái)控制標(biāo)簽的顯示效果

復(fù)制代碼代碼如下:

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

jQuery帶來(lái)的方便：

1.在找被點(diǎn)擊的菜單時(shí)，僅需要一個(gè)$(this)就可以實(shí)現(xiàn)

2.節(jié)點(diǎn)的顯示與隱藏，只用一條語(yǔ)句：toggle()就可以，并且還可以在數(shù)組上實(shí)現(xiàn)所有節(jié)點(diǎn)都具有這種功能。

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

您可能感興趣的文章: