jquery之二級下拉菜單

時間 2021-08-12

標籤 javascript css java jquery 數據庫安全 ide 函數佈局網站欄目 JQuery 简体版

原文原文鏈接

爲什麼我眼中深含淚水，由於我親愛的界面啊。javascript

仍是以爲作多了對數據庫的增刪改查，也要作作漂亮界面換換心情。jquery神奇之大，不可一日而蹴。今天的二級下拉菜單使用到了jquery的三個方法，短短一行代碼就搞定。css

首先看看效果是咋樣的：java

這個你們都熟悉吧，這個就是鼠標放上去就會自動顯示下拉菜單，鼠標移開固然下拉菜單就「沒了」咯。jquery

再看看它的佈局：數據庫

這個一看就明白了，<li>標籤下面的<ul>標籤是隱藏的(display:none)，鼠標放上<a>連接，就會修改<ul>的display屬性，讓其顯示。安全

爲了突出jquery的偉大之處，我講一下用普通js+css實現這個效果的方法。ide

首先定義一個父容器，至關於上面的<li>標籤，在父容器中，定義兩個子容器，一個是顯示的，一個是隱藏的。特別注意一下：隱藏的子容器的位置position是設爲absolute的，而且其父容器是position:relative的。簡單的說就是子容器絕對定位，跟以它最近的，以定位的父容器爲參照物，不然，就是以body爲參照物。詳情請查看css中的定位知識。函數

在顯示的子容器上添加倆個事件，連接的話有自帶的a:hover事件，表示鼠標移上去。其餘的話能夠用onmouseover，onmouseout事件，觸發時間則調用一個function，在function中修改那個隱藏的子容器的display屬性，設爲「block」。佈局

還有個小問題，就是鼠標一開，那隱藏的子容器立刻隱藏，這個不利於用戶體驗，正常的應該是等過500或600毫秒子容器再隱藏，因此還須要調用window.setTimeout和window.clearTimeout這兩個函數。就這麼簡單，代碼差很少就是下面的：網站

  
  
           
  
  
   
   
            
   
   //顯示 
   
   
            
   
   function showDiv(id){ 
   
   
            
   
       if(t1){ 
   
   
            
   
           window.clearTimeout(t1); 
   
   
            
   
       } 
   
   
            
   
       var div = document.getElementById(id); 
   
   
            
   
       div.style.display="block"; 
   
   
            
   
   } 
   
   
            
   
   //隱藏 
   
   
            
   
   function closeDiv(id){ 
   
   
            
   
       t1 = window.setTimeout(function (){ 
   
   
            
   
           var div = document.getElementById(id); 
   
   
            
   
           div.style.display="none"; 
   
   
            
   
       },300);  
   
   
            
   
   }

再看看jquery是怎麼作的：

  
  
           
  
  
   
   
            
   
   $(function(){ 
   
   
            
   
       $(".topli").hover( 
   
   
            
   
   //鼠標移上去，則show顯示 
   
   
            
   
   function(){$(this).find('.subnav').show();}, 
   
   
            
   
   //鼠標移開，則hide隱藏 
   
   
            
   
   function(){$(this).find('.subnav').hide()}) 
   
   
            
   
   })

再來看看jquery中的hover方法：

hover裏面的兩個參數分別表示鼠標移上去調用的事件函數和鼠標移開的事件函數。

主要源代碼：

  
  
           
  
  
   
   
            
   
   <link href="css/163css.css" type="text/css" rel="stylesheet"> 
   
   
            
   
   <script src="http://code.jquery.com/jquery-latest.js" type=text/javascript></script> 
   
   
            
   
   <script type="text/javascript"> 
   
   
            
   
   $(function(){ 
   
   
            
   
       $(".topli").hover(function(){$(this).find('.subnav').show();},function(){$(this).find('.subnav').hide()}) 
   
   
            
   
   }) 
   
   
            
   
   </script> 
   
   
            
   
   </head> 
   
   
            
   
   <body> 
   
   
            
   
   <ul class="mainnav"> 
   
   
            
   
       <li class="topli"><a class="topa" href="#">首頁</a></li> 
   
   
            
   
       <li class="topli"><a class="topa" href="#">我的服務</a> 
   
   
            
   
           <ul class="subnav">              
   
   
            
   
               <li><a href="#">轉帳付款</a><a href="#">水電煤繳費</a><a href="#">返利商家</a><a href="#">帳戶管理</a></li> 
   
   
            
   
           </ul> 
   
   
            
   
       </li> 
   
   
            
   
       <li class="topli"><a class="topa" href="#">付款方式</a> 
   
   
            
   
           <ul class="subnav">              
   
   
            
   
               <li><a href="#">付款方式介紹</a><a href="#">合做夥伴</a><a href="#">付款方式推薦</a></li> 
   
   
            
   
           </ul> 
   
   
            
   
       </li> 
   
   
            
   
       <li class="topli"><a class="topa" href="#">安全中心</a> 
   
   
            
   
           <ul class="subnav">              
   
   
            
   
               <li><a href="#">帳戶管理</a><a href="#">水電煤繳費</a><a href="#">付款方式推薦</a></li> 
   
   
            
   
           </ul> 
   
   
            
   
       </li> 
   
   
            
   
   </ul> 
   
   
            
   
   </body>