需求說明
鼠標移至“聯系客服”，二級菜單以“slow”速度顯示；當鼠標離開時，二級菜單以“fast”速度隱藏
鼠標一級菜單時，使用slideDown( ) 實現二級菜單以“slow”速度顯示；當鼠標再次單擊一級菜單時，使用slideUp( ) 實現二級菜單以“ slow ”速度隱藏
首先是html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京東常見問題分類頁面</title> <link href="css/Chang.css" rel="stylesheet"/> </head> <body> <div class="top"> <div class="wrap"> <div class="top-l left">歡迎光臨京東，請<a href="" class="top-login">登錄</a><a href="">免費注冊</a></div> <ul class="top-m right"> <li><a href=""><i class="top-car left"></i>購物車</a></li> <li class="line"></li> <li><a href="">我的交易單</a></li> <li class="line"></li> <li><a href="">會員中心</a></li> <li class="line"></li> <li><a href=""><i class="top-tel left"></i>我的關注</a></li> <li class="line"></li> <li class="on"> <a href="" class="menu-btn">聯系客服</a> <ul class="topDown"> <li><a href="">幫助中心</a></li> <li><a href="">我要吐槽</a></li> <li><a href="">在線客服</a></li> <li><a href="">咨詢JIMI</a></li> <li><a href="">客服郵箱</a></li> </ul> </li> <li class="line"></li> <li><a href="" class="menu-btn">手機金融</a></li> <li class="line"></li> <li><a href="" class="menu-btn">網站導航</a></li> <li class="line"></li> </ul> <div class="clearfix"></div> </div> </div> <div class="wrap"> <a href=""><img src="img/logo.png"alt="logo"/></a> </div> <div class="wrap"> <nav class="nav"> <header>常見問題分類</header> <ul> <li><dl> <dt>京東金融</dt> <dd><a href=" ">京東金融簡介</a></dd> <dd><a href="#">京東金融會員</a></dd> <dd><a href="#">京東金融安全中心</a></dd> </dl></li> <li><dl> <dt>理財</dt> <dd><a href="#">京東小金庫</a></dd> <dd><a href="#">京東基金理財</a></dd> <dd><a href="#">京東保險理財</a></dd> <dd><a href="#">小白理財</a></dd> <dd><a href="#">智投理財</a></dd> <dd><a href="#">樂猜</a></dd> </dl></li> <li><dl> <dt>白條</dt> <dd><a href="#">京東白條</a></dd> <dd><a href="#">京東金條</a></dd> <dd><a href="#">校園白條</a></dd> <dd><a href="#">教育白條</a></dd> <dd><a href="#">鄉村白條</a></dd> <dd><a href="#">京東金采</a></dd> <dd><a href="#">京農貸</a></dd> </dl></li> <li><dl> <dt>眾籌</dt> <dd><a href=" ">產品眾籌</a></dd> <dd><a href="#">輕眾籌</a></dd> <dd><a href="#">產品眾籌發起者常見問題</a></dd> <dd><a href="#">產品眾籌支持者常見問題</a></dd> <dd><a href="#">產品眾籌永久眾籌常見問題</a></dd> <dd><a href="#">京東眾創常見問題</a></dd> </dl></li> <li><dl> <dt>京東錢包</dt> <dd><a href="#">京東錢包簡介</a></dd> <dd><a href="#">自動服務及常見問題</a></dd> <dd><a href="#">購房盈</a></dd> </dl></li> </ul> </nav> <section class="content"> <p>京東金融 > 京東金融會員</p > <ul> <li>•<a href="#">什么是京東金融會員</a> </li> <li>•<a href="#">會員簽到規則</a> </li> <li>•<a href="#">會員金幣</a> </li> <li>•<a href="#">小白信用</a> </li> <li>•<a href="#">外部虛擬券</a> </li> </ul> </section> </div> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/Chang.js"></script> </body> </html>
然后是js( jquery-1.8.3.min.js )
$(document).ready(function(){
$(".top-m .on").hover(function(){
$(".topDown").show("slow");
},
function(){
$(".topDown").hide("fast");
}
);
$(".nav dt").toggle(
function(){ $(this).siblings().slideDown("slow");},
function(){$(this).siblings().slideUp("slow");}
)
});
最后是css
*{padding:0;margin:0;}
html{color:#404040;font-size:12px;font-family:"Arial","微軟雅黑";}
a{text-decoration:none;color:#1a66b3;}
ul{list-style:none;}
.left{float:left;}
.right{float:right;}
.hide{display:none;}
.clearfix{clear:both;overflow:hidden;height:0;}
.wrap{width:800px;margin:0 auto;}
.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}
.top,.top a{color:#646464;}
.top a:hover{color:#ff2832;}
.top-l .top-login{color:#ff2832;margin-right:5px;}
.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}
.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}
.top-m > li a{display:block;padding:0 8px;}
.top-m > li a.menu-btn{padding-right:27px;background:url(../img/home_sprite.png) no-repeat right -307px;}
.top-m > li a i{margin-right:6px;margin-top:3px;}
.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}
.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;display:none;}
.top-m ul.topDown li{line-height:24px;}
.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}
.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}
.top-m .top-car{width:15px;height:14px;background:url(../img/home_sprite.png) no-repeat -40px -86px;}
.top-m .top-tel{width:11px;height:16px;background:url(../img/home_sprite.png) no-repeat -40px -70px;}
.wrap img[alt='logo']{margin: 10px 0;}
.nav {
float: left;
width: 200px;
margin-right: 10px;}
.nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
.nav ul{border: 1px #cccccc solid; border-top: none;}
.nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
.nav dd{display: none;padding-left: 15px;}
.nav dd a{color: #666666; line-height: 30px; font-size: 14px;}
.content{
float: left;
width: 548px ;
border: 1px #cccccc solid;
}
圖片