溫馨提示×

溫馨提示×

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

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

Jquery系列之橫向縱向菜單

發(fā)布時間：2020-04-08 10:54:03 來源：網絡 閱讀：1811 作者：zhuweiat2009 欄目：web開發(fā)

jsp頁面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  2.     pageEncoding="UTF-8"%> 
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  4. <html> 
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  7. <link type="text/css" rel="stylesheet" href="css/menu.css"></link> 
  8. <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
  9. <script type="text/javascript" src="js/menu.js"></script> 
  10. <title>橫向縱向菜單</title> 
  11. </head> 
  12. <body> 
  13.     <ul> 
  14.             <li class="main"> 
  15.                     <a href="#">菜單項1</a> 
  16.                 <ul> 
  17.                     <li> 
  18.                         <a href="#">子菜單項11</a> 
  19.                     </li> 
  20.                     <li> 
  21.                         <a href="#">子菜單項12</a> 
  22.                     </li> 
  23.                 </ul> 
  24.             </li> 
  25.             <li class="main"> 
  26.                 <a href="#">菜單項2</a> 
  27.                 <ul> 
  28.                     <li> 
  29.                         <a href="#">子菜單項21</a> 
  30.                     </li> 
  31.                     <li> 
  32.                         <a href="#">子菜單項22</a> 
  33.                     </li> 
  34.                 </ul> 
  35.             </li> 
  36.             <li class="main"> 
  37.                 <a href="#">菜單項3</a> 
  38.                 <ul> 
  39.                     <li> 
  40.                         <a href="#">子菜單項31</a> 
  41.                     </li> 
  42.                     <li> 
  43.                         <a href="#">子菜單項32</a> 
  44.                     </li> 
  45.                 </ul> 
  46.             </li> 
  47.         </ul> 
  48.         <br /> 
  49.         <br /> 
  50.         <br /> 
  51.         <ul> 
  52.             <li class="hmain"> 
  53.                     <a href="#">菜單項1</a> 
  54.                 <ul> 
  55.                     <li> 
  56.                         <a href="#">子菜單項11</a> 
  57.                     </li> 
  58.                     <li> 
  59.                         <a href="#">子菜單項12</a> 
  60.                     </li> 
  61.                 </ul> 
  62.             </li> 
  63.             <li class="hmain"> 
  64.                 <a href="#">菜單項2</a> 
  65.                 <ul> 
  66.                     <li> 
  67.                         <a href="#">子菜單項21</a> 
  68.                     </li> 
  69.                     <li> 
  70.                         <a href="#">子菜單項22</a> 
  71.                     </li> 
  72.                 </ul> 
  73.             </li> 
  74.             <li class="hmain"> 
  75.                 <a href="#">菜單項3</a> 
  76.                 <ul> 
  77.                     <li> 
  78.                         <a href="#">子菜單項31</a> 
  79.                     </li> 
  80.                     <li> 
  81.                         <a href="#">子菜單項32</a> 
  82.                     </li> 
  83.                 </ul> 
  84.             </li> 
  85.         </ul> 
  86. </body> 
  87. </html> 

css樣式

  1. ul,li{  
  2.     /*清除ul和li上默認的小圓點*/ 
  3.     list-style: none;  
  4. }  
  5.  
  6. ul {  
  7.     /*清除子菜單的縮進值*/ 
  8.     padding: 0;  
  9.     margin: 0;  
  10. }  
  11. .main,.hmain {  
  12.     background-p_w_picpath: url(../p_w_picpaths/title.gif);  
  13.     background-repeat: repeat-x;  
  14.     width: 120px;  
  15. }  
  16. li {  
  17.     background-color: #EEEEEE;  
  18. }  
  19. a {  
  20.     /*取消所有的下劃線*/ 
  21.     text-decoration: none;  
  22.     padding-left: 20px;  
  23.     display: block;  
  24.     display: inline-block;  
  25.     width: 100px;  
  26.     padding-top: 3px;  
  27.     padding-bottom: 3px;  
  28. }  
  29. .main a, .hmain a {  
  30.     color: white;  
  31.     background-p_w_picpath: url(../p_w_picpaths/collapsed.gif);  
  32.     background-repeat: no-repeat;  
  33.     background-position: 3px center;  
  34. }  
  35. .main li a, .hmain li a {  
  36.     color: black;  
  37.     background-p_w_picpath: none;  
  38. }  
  39. .main ul, .hmain ul {  
  40.     display: none;  
  41. }  
  42. .hmain {  
  43.     float: left;  
  44.     margin-right: 1px;  
  45. } 

Jquery代碼

 

  1. $(document).ready(function(){  
  2.     //頁面中的DOM已經裝載完成時，執(zhí)行的代碼  
  3.     $(".main > a").click(function(){  
  4.         //找到主菜單項對應的子菜單項  
  5.         var ulNode = $(this).next("ul");  
  6.         /*  
  7.         if (ulNode.css("display") == "none") {  
  8.             ulNode.css("display","block");  
  9.         } else {  
  10.             ulNode.css("display","none");  
  11.         }  
  12.         */ 
  13.         //ulNode.show("slow");//normal fast  
  14.         //ulNode.hide();  
  15.         //ulNode.toggle();  
  16.         //  
  17.         //ulNode.slideDown("slow");  
  18.         //ulNode.slideUp;  
  19.         ulNode.slideToggle();  
  20.         changeIcon($(this));  
  21.     });  
  22.     $(".hmain").hover(function(){  
  23.         $(this).children("ul").slideDown();  
  24.         changeIcon($(this).children("a"));  
  25.     },function(){  
  26.         $(this).children("ul").slideUp();  
  27.         changeIcon($(this).children("a"));  
  28.     });  
  29. });  
  30.  
  31. /**  
  32.  * 修改主菜單的指示圖標  
  33.  */ 
  34. function changeIcon(mainNode) {  
  35.     if (mainNode) {  
  36.         if (mainNode.css("background-p_w_picpath").indexOf("collapsed.gif") >= 0) {  
  37.             mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");  
  38.         } else {  
  39.             mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");  
  40.         }  
  41.     }  
  42. }  

 

向AI問一下細節(jié)

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

AI
助
手