jQuery 二級下拉選單

螞蟻小編發表於2017-03-16
jQuery

二級下拉選單在實際應用中非常的常見，比如企業網站的產品分類，或者部門分類等等，下面就通過程式碼例項詳細介紹一下簡單的二級下拉選單是如何實現的，當然還有更為複雜的二級選單，不過先學會如何製作簡單的才是上進之路。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
nav a{ 
  text-decoration:none; 
} 
nav>ul>li{ 
  float:left; 
  text-align:center; 
  padding:0 0.5em;
  width:120px; 
}
nav li ul.sub-menu{ 
  display:none; 
  padding-left:0 !important; 
} 
.sub-menu li{color:white;} 
.sub-menu li:hover{background-color:black;} 
.sub-menu li:hover a{color:white;} 
ul{list-style: none;} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $('.box> li').hover(function(){ 
    $(this).find('.sub-menu').css('display', 'block'); 
  },function(){ 
    $(this).find('.sub-menu').css('display', 'none'); 
  }); 
}); 
</script> 
</head>
<body>
<nav>
  <ul class="box">
    <li><a href="#">前端專區</a>
      <ul class="sub-menu">
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">css教程</a></li>
        <li><a href="#">js教程</a></li>
      </ul>
    </li>
    <li><a href="#">資源專區</a>
      <ul class="sub-menu">
        <li><a href="#">電腦模板下載</a></li>
        <li><a href="#">手機模板下載</a></li>
        <li><a href="#">特效下載</a></li>
      </ul>
    </li>
    <li><a href="#">交流專區</a>
      <ul class="sub-menu">
        <li><a href="#">運營交流</a></li>
        <li><a href="#">seo優化</a></li>
        <li><a href="#">站長交流</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>

以上程式碼程式碼可實現了我們的要求，下面介紹一下他的實現過程。

一.實現原理:

所謂的下拉選單就是滑鼠懸浮的時候，能偶使一個隱藏的元素顯示，這個隱藏的元素裡面的內容就是二級下拉選單，當滑鼠離開的時候，這個元素然後隱藏，那麼二級下拉選單也就消失了，這就是基本的原理。

二.程式碼註釋:

1.<li><a href="#">前端專區</a>

  <ul class="sub-menu">

    <li><a href="#">jquery教程</a></li>

    <li><a href="#">css教程</a></li>

    <li><a href="#">js教程</a></li>

  </ul>

</li>

上面的程式碼是二級下拉選單的框架，在預設狀態下，裡面的ul是隱藏的，也就是預設狀態二級下拉選單是隱藏的。

2.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

3.$('.box> li').hover(function(){}），box下的一級li元素註冊hover事件處理函式，也就是滑鼠懸浮和離開要執行的函式。

4.$(this).find('.sub-menu').css('display', 'block')，將二級選單ul元素顯示處理。

5.function(){$(this).find('.sub-menu').css('display', 'none');})，將二級選單隱藏。

三.相關閱讀:

1.hover()可以參閱jQuery hover 事件一章節。

2.find()函式可以參閱jQuery find()一章節。

3.css()函式可以參閱jQuery css()一章節。

相關文章