溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

[置頂]       4行代碼簡單實(shí)現(xiàn)js樹形菜單

發(fā)布時(shí)間：2020-06-23 20:05:41 來源：網(wǎng)絡(luò) 閱讀：560 作者：873582595 欄目：web開發(fā)

通常情況下，我們都會(huì)用到一些樹形菜單，但一時(shí)間苦于不知道如何選擇合適的控件進(jìn)行整合。

　　于是打算自己嘗試弄個(gè)簡單的樹形菜單。在這過程中，我發(fā)現(xiàn): 對(duì)于一棵簡單的樹形菜單，4行代碼足矣。

　　html代碼的編寫，直接采用了ul-li的嵌套方式。主要的javascript代碼如下：

1 $(".menu ul").css("display","none"); 2 $(".menu a").on("click", function(){ 3     $(this).next().toggle(); 4 });


　　原理很簡單：

　　　　1. 初始化時(shí)，把ul隱藏。

　　　　2. 點(diǎn)擊菜單時(shí)，切換它下面的ul顯示或隱藏。

　　具體和效果如下圖：

[置頂]       4行代碼簡單實(shí)現(xiàn)js樹形菜單

　　完整代碼如下：

 

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <title>menu tree</title>     <meta name="viewport" content="width=device-width, initial-scale=1.0">    </head>     <ul class="menu">         <li>             <a href="#">A1</a>             <ul>                 <li><a href="#">A1-1</a></li>                 <li><a href="#">A1-2</a></li>                 <li>                     <a href="#">A1-3</a>                     <ul>                         <li><a href="#">A1-3-1</a></li>                         <li><a href="#">A1-3-2</a></li>                     </ul>                 </li>             </ul>         </li>         <li>             <a href="#">A2</a>             <ul>                 <li><a href="#">A2-1</a></li>                 <li><a href="#">A2-2</a></li>             </ul>                     </li>         <li><a href="#">A3</a></li>     </ul>   <body>        <script type="text/javascript" src="loginFile/jquery.js"></script>     <script type="text/javascript">         $(document).ready(function(){             $(".menu ul").css("display","none");                $(".menu a").on("click", function(){                     $(this).next().toggle();                });                     });     </script>   </body> </html>


 

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手