欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

分享我的jquery實現(xiàn)下拉菜單心的

 更新時間：2015年11月29日 11:29:07   作者：ncp6  
jquery庫給我們帶來了很多方便的地方，使用jquery實現(xiàn)一個簡單的下拉菜單已經(jīng)是很簡單了，但也有不同的實現(xiàn)方法。今天自己使用jquery寫了一個下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺值得記錄一下。

摘要：

　　jquery庫給我們帶來了很多方便的地方，使用jquery實現(xiàn)一個簡單的下拉菜單已經(jīng)是很簡單了，但也有不同的實現(xiàn)方法。今天自己使用jquery寫了一個下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺值得記錄一下。

實現(xiàn)：

　　首先上他的代碼（把全部的代碼貼上來太長了，就撿部分吧），

　　一、html中ul列表

 <ul class="topmenu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul class="submenu1">
          <li><a href="#">Ch1</a></li>
          <li><a href="#">Ch2</a>
            <ul class="submenu11">
              <li><a href="#">Ch21</a>
                <ul class="submenu11">
                  <li><a href="#">Ch211</a>
                    <ul class="submenu11">
                      <li><a href="#">Ch2111</a>
                        <ul class="submenu11">
                          <li><a href="#">Ch21111</a></li>
                          <li><a href="#">Ch21112</a></li>
                          <li><a href="#">Ch21113</a></li>
                          <li><a href="#">Ch21114</a></li>
                          <li><a href="#">Ch21115</a></li>
                          <li><a href="#">Ch21116</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Ch2112</a></li>
                      <li><a href="#">Ch2113</a></li>
                      <li><a href="#">Ch2114</a></li>
                      <li><a href="#">Ch2115</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Ch212</a></li>
                  <li><a href="#">Ch213</a></li>
                  <li><a href="#">Ch214</a></li>
                </ul>
              </li>
              <li><a href="#">Ch22</a>
                <ul class="submenu11">
                  <li><a href="#">Ch221</a></li>
                  <li><a href="#">Ch222</a></li>
                  <li><a href="#">Ch223</a></li>
                </ul>
              </li>
              <li><a href="#">Ch23</a></li>
            </ul>
          </li>
          <li><a href="#">Ch3</a>
            <ul class="submenu11">
              <li><a href="#">Ch31</a></li>
              <li><a href="#">Ch32</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Resources</a>
        <ul class="submenu1">
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
        </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">Submit</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

　　其中為六層深度的菜單結(jié)構(gòu)，如下圖

　　二、js部分（css就不貼出來了）

$(document).ready(function() {
  //第一部分
  // Top Menu
  //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
  $("ul.submenu1").parent().append("<span></span>"); 
  //第二部分
  $("ul.topmenu li span").click(function() { //When trigger is clicked...
    //Following events are applied to the submenu1 itself (moving submenu1 up and down)    
    //Drop down the submenu1 on click
    $(this).parent().find("ul.submenu1").slideDown('fast').show();   
    //在click后給綁定hover處理函數(shù)，感覺是比較巧妙的地方
    $(this).parent().hover(function() {
    }, function() {
      //When the mouse hovers out of the submenu1, move it back up
      $(this).parent().find("ul.submenu1").slideUp('slow'); 
    });
    //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() {
    //On hover over, add class "hover"
    $(this).addClass("hover"); 
  }, function() {  //On Hover Out
    //On hover out, remove class "hover"
    $(this).removeClass("hover"); 
  });
  //第三部分
  $("ul.topmenu li ul.submenu1 li").hover(function() {
    $(this).find("ul.submenu11:first").show("slow");
  }, function() {
    $(this).find("ul.submenu11:first").hide("fast");
  });
})；

　　第一部分：

　　添加了下了菜單的一個觸發(fā)按鈕

　　第二部分：

　　綁定了一個click事件的處理函數(shù)

　　觸發(fā)按鈕被click后給下拉菜單最外層的li綁定hover處理函數(shù)，感覺是比較巧妙的地方。

　　給最外層的li綁定hover函數(shù)，這里處理函數(shù)寫的是當(dāng)鼠標(biāo)懸停在li上時不做任何處理（第一函數(shù)為空），當(dāng)鼠標(biāo)離開時li收起。

　　這樣一來，后面展開ul的菜單都是最外層的li里面，這樣菜單就不會自動收起了，也就是等于是鼠標(biāo)離開了整個菜單，li會自動收起。

　　第三部分：

　　給菜單下中嵌套的ul的hover事件綁定函數(shù)，用于展開和收起下一級菜單

　　$(this).find("ul.submenu11:first")也是比較巧妙的通過find獲得當(dāng)前匹配元素集合中每個元素的后代，并通過“ul.submenu11:first”篩選活動下一代元素給以展開。

　　同時也給下一級菜單綁定了收起的處理函數(shù)，與觸發(fā)菜單中click給最外層li綁定的收起函數(shù)一同作用，是想菜單的自動收起功能。

總結(jié)：

　　其中展現(xiàn)了jquery篩選器的強大和靈活，也體現(xiàn)jquery優(yōu)美的鏈?zhǔn)秸Z法。

下面給大家分享一段純jQuery水平下拉菜單實現(xiàn)

<!DOCTYPE html>
<html>
  <head>
   <title>jQuery水平下拉菜單實現(xiàn)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
   <!--[if lt IE 9]>
     <script src="bootstrap/js/html5shiv.js"></script>
     <script src="bootstrap/js/respond.min.js"></script>
   <![endif]-->
   <style type="text/css">
 .menus{border:1px solid red; float:left; margin-left:4px; background:red;}
 .menus a{display:block; width:100px; text-align:center;}
 .menu{display:none;}
 a{cursor:pointer;text-decoration:none;}
 a:hover{background:white; text-decoration:none;}
 a:visited{text-decoration:none; color:black;}
  </style>
   <script>
    $(function(){
 $(".menu-title").click(function(){
 $(this).next().toggleClass();
 });
    });
   </script>
  </head>
  <body> 
   <div class="menus">
    <a class="menu-title">菜單項</a>
    <div class="menu">
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜單項</a>
    <div class="menu">
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜單項</a>
    <div class="menu">
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜單項</a>
    <div class="menu">
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
     <a href="#" class="menu-item">菜單列表</a>
    </div>
   </div>
  </body>
</html>

相關(guān)文章

最新評論