通過之前的站點導航案例,分離下拉菜單的共性和特性 dropdown.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" h ...
通過之前的站點導航案例,分離下拉菜單的共性和特性
dropdown.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分離出dropdown公共樣式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分離出nav的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ width:8px; height:6px; background-image:url(../img/dropdown-arrow.png); margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .menu-active .dropdown-list{ display: block; } </style> </head> <body> <div class="menu dropdown" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <script src="../js/jquery.js"></script> <script> // 這種方法不通用,需要使用函數,將需要下拉顯示的元素通過參數傳入 $(".dropdown").hover(function(){ var ui=$(this);//緩存 //.data(屬性名)和attr("data-屬性名") 效果相同 //可以獲取data-開頭的屬性值 ui.addClass(ui.data("active")+"-active"); },function(){ ui.removeClass(ui.attr("data-active")+"-active"); });</script> </body> </html>
效果圖
但是,這種js的寫法不通用,建議使用函數,並將目標元素通過參數傳入
js部分代碼改為:
<script> function dropdown(elem){ var elem=$(elem); var activeClass=elem.data("active")+"-active"; elem.hover(function(){ elem.addClass(activeClass); },function(){ elem.removeClass(activeClass); }) } //獲取到的是數組,因此取第一個 dropdown($(".dropdown")[0]); </script>
如果此時頁面上有多個下拉菜單(將dropdown複製一份)
使用each來迴圈進行調用函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分離出dropdown公共樣式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分離出nav的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ width:8px; height:6px; background-image:url(../img/dropdown-arrow.png); margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .menu-active .dropdown-list{ display: block; } </style> </head> <body> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <script src="../js/jquery.js"></script> <script> function dropdown(elem){ var elem=$(elem); var activeClass=elem.data("active")+"-active"; elem.hover(function(){ elem.addClass(activeClass); },function(){ elem.removeClass(activeClass); }) } //迴圈調用 $(".dropdown").each(function(){ dropdown($(this)); }) </script> </body> </html>
這樣寫的代碼不夠優雅,決定改用jquery的插件形式來編寫
<script> function dropdown(elem){ var elem=$(elem); var activeClass=elem.data("active")+"-active"; elem.hover(function(){ elem.addClass(activeClass); },function(){ elem.removeClass(activeClass); }) } //插件形式 $.fn.extend({ dropdown:function(){ return this.each(function(){//遍曆數組 dropdown(this); }); } }); //插件形式調用 $(".dropdown").dropdown(); </script>
為了插件的復用,將js代碼單獨放到一個js文件中
為了不暴露在全局作用域下,使用匿名函數自執行的方式創建局部作用域
dropdown.js
(function($){ 'use strict';//使用嚴格模式 function dropdown(elem){ var elem=$(elem); var activeClass=elem.data("active")+"-active"; elem.hover(function(){ elem.addClass(activeClass); },function(){ elem.removeClass(activeClass); }) } //插件形式 $.fn.extend({ dropdown:function(){ return this.each(function(){//遍曆數組 dropdown(this); }); } }); })(jQuery); //為了防止$符發生衝突,將jQuery作為參數傳入,則$符作為內部變數,不會發生衝突
根據封裝好的dropdown下拉列表插件,改寫之前寫好的導航中的下拉列表
改寫的index.html
<!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/common.css"> <!-- css一般放在DOM載入前,防止DOM裸奔 --> </head> <body> <!-- 導航 --> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" class="nav-site-login">親,請登錄</a></li> <li class="fl"><a href="javascript:;" class="nav-site-reg link">免費註冊</a></li> <li class="fl"><a href="#" class="nav-site-shop link">手機逛慕淘</a></li> </ul> <ul class="fr"> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">收藏夾<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">收藏的寶貝</a></li> <li class="menu-item"><a href="#">收藏的店鋪</a></li> </ul> </li> <li class="fl dropdown"> <a href="javascript:;" class="nav-site-cat link">商品分類</i></a> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">賣家中心<i class="dropdown-arrow"></i></a>