基于jquery實(shí)現(xiàn)后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示
更新時(shí)間：2013年04月11日 14:52:53 作者：
一個(gè)左側(cè)菜單點(diǎn)擊是可以上下滑動(dòng)，簡潔時(shí)尚，復(fù)制即可使用，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
今天做了一個(gè)左側(cè)菜單的效果，做后臺(tái)的時(shí)候應(yīng)該會(huì)經(jīng)常用到這個(gè)效果的,代碼同樣是簡潔明了，復(fù)制即可用：
效果圖如下：
代碼如下：（這個(gè)上下箭頭的圖標(biāo)如上，圖標(biāo)可自己換）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示jquery</title>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box dt:first").addClass("active");
$(".box dd:not(:first)").hide();
$(".box dt").click(function(){
$(this).next("dd").slideToggle()
.siblings("dd").slideUp();
$(this).toggleClass('active')
.siblings("dt").removeClass("active");
});
});
</script>
<style type="text/css">
* { padding:0; margin:0; }
body { padding:100px; font:12px "宋體"; }
dl,dt,dd{list-style:none;}
.box { width:500px; border-bottom:1px solid #CCC; }
.box dt { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(img/bg.gif) no-repeat right -27px; }
.box dt.active { background-position:right 7px; }
.box dd { border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 10px; }
.box dd p{line-height:20px; }
</style>
</head>
<body>
<div class="box">
<dl>
<dt>標(biāo)題一</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
<dt>標(biāo)題二</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
<dt>標(biāo)題三</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
<dt>標(biāo)題四</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
</dl>
</div>
</body>
</html>
效果圖如下：
代碼如下：（這個(gè)上下箭頭的圖標(biāo)如上，圖標(biāo)可自己換）
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示jquery</title>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box dt:first").addClass("active");
$(".box dd:not(:first)").hide();
$(".box dt").click(function(){
$(this).next("dd").slideToggle()
.siblings("dd").slideUp();
$(this).toggleClass('active')
.siblings("dt").removeClass("active");
});
});
</script>
<style type="text/css">
* { padding:0; margin:0; }
body { padding:100px; font:12px "宋體"; }
dl,dt,dd{list-style:none;}
.box { width:500px; border-bottom:1px solid #CCC; }
.box dt { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(img/bg.gif) no-repeat right -27px; }
.box dt.active { background-position:right 7px; }
.box dd { border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 10px; }
.box dd p{line-height:20px; }
</style>
</head>
<body>
<div class="box">
<dl>
<dt>標(biāo)題一</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
<dt>標(biāo)題二</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
<dt>標(biāo)題三</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
<dt>標(biāo)題四</dt>
<dd>
<p><a href="#">第一項(xiàng)</a></p>
<p><a href="#">第二項(xiàng)</a></p>
<p><a href="#">第三項(xiàng)</a></p>
</dd>
</dl>
</div>
</body>
</html>
您可能感興趣的文章:
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能完整示例
- jQuery實(shí)現(xiàn)菜單的顯示和隱藏功能示例
- jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
- jQuery實(shí)現(xiàn)可高亮顯示的二級(jí)CSS菜單效果
- jquery實(shí)現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示二級(jí)下拉菜單效果
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng)
- jQuery實(shí)現(xiàn)菜單顯示效果
相關(guān)文章
jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
jquery清空textarea等輸入框在工作中很常見，接下來的代碼簡單實(shí)用，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
以前寫過一篇文章以jquery為基礎(chǔ)的星星評(píng)分，今天有時(shí)間把這個(gè)功能重寫，并以jQuery插件的形式出現(xiàn)以便以后使用。2011-08-08
jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單效果,以完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-09-09
再談Jquery Ajax方法傳遞到action(補(bǔ)充)
之前寫過一篇文章Jquery Ajax方法傳值到action，本文是對(duì)該文的補(bǔ)充2014-05-05
jquery封裝插件時(shí)匿名函數(shù)形參和實(shí)參的寫法解釋
本文主要介紹了jquery封裝插件時(shí)匿名函數(shù)形參和實(shí)參的寫法解釋。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery中extend函數(shù)簡單用法,結(jié)合實(shí)例形式簡單分析了jQuery使用extend函數(shù)擴(kuò)展對(duì)象屬性的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
擴(kuò)展Jquery插件處理mouseover時(shí)內(nèi)部有子元素時(shí)發(fā)生樣式閃爍
在我們對(duì)一個(gè)dom添加mouseover和mouseout時(shí)，也就是jquery的hover事件，如果該dom有子元素，鼠標(biāo)移到子元素時(shí)會(huì)觸發(fā)mouseout事件，但往往實(shí)際情況我們希望在子元素上不觸發(fā)out事件2011-12-12
jQuery查找和過濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JQuery為textarea添加maxlength屬性并且兼容IE
textarea默認(rèn)不支持maxlength屬性，JQuery為textarea添加maxlength,并且兼容IE，具體實(shí)現(xiàn)祥看本文，希望可以幫助到你2013-04-04
jquery 子窗口操作父窗口的實(shí)現(xiàn)代碼。2009-09-09