快捷導(dǎo)航

jQuery實現(xiàn)可收縮展開的級聯(lián)菜單實例代碼

更新時間：2013年11月27日 10:17:39 作者：

這篇文章主要是對利用jQuery實現(xiàn)可收縮展開的級聯(lián)菜單的實例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

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

•1.首先使用<ul>和<li>創(chuàng)建一個級聯(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.編寫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; /*讓子菜單向右移動一段距離，達(dá)到縮進(jìn)的效果*/
    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")

您可能感興趣的文章:

相關(guān)文章

利用JavaScript判斷瀏覽器類型及版本
瀏覽器對于我們來說，可能是最熟悉的工具了。在我們的產(chǎn)品開發(fā)過程中，經(jīng)常要考慮瀏覽器兼容問題，以適應(yīng)不同的用戶人群，同時也減少因瀏覽器兼容問題所帶來的服務(wù)量。所以檢測瀏覽器的版本及類型就是很重要的一件事了，下面來一起看看用Javascript如何實現(xiàn)。
2016-08-08
詳解js創(chuàng)建對象的幾種方法及繼承
這篇文章主要介紹了js創(chuàng)建對象的幾種方法及繼承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
微信小程序?qū)崿F(xiàn)手機(jī)號碼驗證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)號碼驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
今天小編就為大家分享一篇layui type2 通過url給iframe子頁面?zhèn)髦档睦?，具有的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09