<!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.編寫JavaScript代碼，控制級聯(lián)菜單的收縮

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

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

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

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

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

jQuery帶來的方便：

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

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

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

您可能感興趣的文章: