jquery實現(xiàn)動態(tài)菜單的實例代碼

2024-05-06 15:56:25

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

這篇文章主要介紹了jquery實現(xiàn)動態(tài)菜單的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助

jquery實現(xiàn)動態(tài)菜單的方式跟jquery彈出窗口的方式差不多，都是采用JavaScript操作css的方式。

其具體步驟可以分為以下幾步：

•創(chuàng)建一個含有要表達(dá)的菜單的html頁面

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

<html>
<head>
    <title>jquery示例2：jquery菜單</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" 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>我是子菜單1</li>
        <li>我是子菜單2</li>
    </ul>
    <ul>
        <a href="#" mce_href="#">我是菜單2</a>
        <li>我是子菜單3</li>
        <li>我是子菜單4</li>
    </ul>
    <div></div>
</body>
</html>

•創(chuàng)建一個css文件來控制菜單的顯示

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

/*讓所有的li都不顯示小圓點，可以使用css標(biāo)簽選擇器*/
li{
    /*使list前的小圓點消失*/
    list-style: none;
    /*縮進(jìn)效果*/
    margin-left: 18px;
    /*隱藏菜單*/
    display: none;
}
a{
    /*文字的顯示方式*/
    text-decoration: none;
}

•創(chuàng)建一個JavaScript文件來控制菜單的顯示

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

/*
* 點擊主菜單，子菜單顯示；再次點擊主菜單，子菜單隱藏
* 需要編寫代碼，使得主菜單在裝載時添加onclick事件，使得點擊主菜單可以顯示子菜單
* 注冊頁面裝載時執(zhí)行的方法
*/
$(document).ready(function(){
   //var uls = $("ul");
   //找到ul下的a節(jié)點
   var as = $("ul > a");
   as.click(function(){
       //首先找到當(dāng)前ul中的li，然后讓li顯示出來
       //獲取當(dāng)前被點擊的ul節(jié)點
       var aNode = $(this);
       //找到被點擊ul節(jié)點下的所有l(wèi)i節(jié)點
       var lis = aNode.nextAll("li");
       //顯示或隱藏ul的li子節(jié)點們
       lis.toggle("slow");
   });
});