首頁 > 開發者 > JavaScript
jQuery實現的縱向下拉式功能表執行個體詳解【附demo源碼下載】，jquerydemo
本文執行個體講述了jQuery實現的縱向下拉式功能表。分享給大家供大家參考，具體如下：
當我們瀏覽網頁和使用word編輯一下文字的時候，我們都能看見橫向下拉的身影，有了橫向菜單，我們能對整個介面進行更好的布局，達到我們想要的效果，那麼這些橫向菜單式如何用代碼實現的，當我們瀏覽或使用的時候她又是如何呈現在我們面前的，學習了JQuery之後，小編漸漸看到她美麗的容顏，接下來，小編主要講解如何通過jquery實現縱向下拉式功能表。
第一步，我們來編寫html的代碼，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>JQuery實戰-菜單效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/menu.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/menu.js"></script> </head> <body> <ul> <li class="main"> <a href="#">功能表項目1</a> <ul> <li> <a href="#">子功能表項11</a> </li> <li> <a href="#">子功能表項12</a> </li> </ul> </li> <li class="main"> <a href="#">功能表項目2</a> <ul> <li> <a href="#">子功能表項21</a> </li> <li> <a href="#">子功能表項22</a> </li> </ul> </li> <li class="main"> <a href="#">功能表項目3</a> <ul> <li> <a href="#">子功能表項31</a> </li> <li> <a href="#">子功能表項32</a> </li> </ul> </li> </ul> </body></html>
我們來看一下運行效果：
上面的實現效果已經初步具有了縱向菜單的模型，但是似乎有不完美的地方，主菜單的前面有黑色的小圓點，子功能表前面有白色的小圓點，也沒有立體的效果，不用擔心css可以協助我們解決上述的問題，接著，編寫css的代碼，如下所示：
ul,li{ /*清除ul和li上預設的小圓點*/ list-style:none;}ul{ /*清除子功能表的縮排值*/ padding:0; margin:0;}.main{ background-image:url(../images/title.gif); background-repeat:repeat-x; width:120px;}li{ background-color:#EEEEEE;}a{ /*取消所有的底線*/ text-decoration:none; padding-left:20px; display:block; display:inline-block; width:100px; padding-top:3px; padding-bottom:3px;}.main a{ color:white; background-image:url(../images/collapsed.gif); background-repeat:no-repeat; background-position:3px center;}.main li a{ color:black; background-image:none;}.main ul{ display:none;}
添加了css的代碼，在顯示的時候會有怎麼樣的驚喜帶給我們呢？
的顯示效果已經就更為接近我們的想好實現的效果了，但是這個還是不可以進行點擊的，所以我們還需要編寫js的代碼，相應的，在js中我們也要建立兩個檔案，一個jquery一個menu，鑒於jquery的代碼較多，所以小編已經上傳相關資源，有需要的小夥伴可以點擊文末連結下載，接著，我們來編寫menu的代碼，來給整理頁面添加行為能力，代碼如下：
$(document).ready(function(){ //頁面中的DOM已經裝載完成時，執行的代碼 $(".main > a").click(function(){ //找到主要功能表項目對應的子功能表項 var ulNode =$(this).next("ul"); /* if(ulNode.css("display")=="none") { ulNode.css("display","block"); }else{ ulNode.css("display","none"); } */ /*菜單出現的動畫效果*/ ulNode.show("slow");//normal fast //unlNode.hide(); //ulNode.toggle(); // //ulNode.slideDown("slow"); //ulNode.slideUP; ulNode.sildeToggle(); });})
添加了js的代碼，現在實現的效果是不是和我們想象的一樣呢，如所示：
以上就是小編實現的縱向下拉式功能表的全部過程，既然可以實現縱向下拉式功能表，那麼橫向下拉式功能表又該如何?呢，更縱向菜單的實現過程有哪些不一樣的地方nie，這個過程才是我們成長的過程，在這裡橫向菜單小編就不一一介紹了，完整執行個體代碼點擊此處本站下載。有需要的小夥伴可以down下來，自己研究。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
