jQuery實(shí)現(xiàn)的導(dǎo)航條切換可顯示隱藏
更新時(shí)間：2014年10月22日 17:24:17 投稿：whsnow
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換，顯示隱藏，主要用到slideToggle( )，toggeClass( )，toggle()
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換，顯示隱藏，主要運(yùn)用的技術(shù)有slideToggle( )，toggeClass( )，toggle( ):
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導(dǎo)航條在項(xiàng)目中的應(yīng)用</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tit").find("span").click(function(){
$(this).toggleClass("closeBtn2").parent().next().slideToggle(); //實(shí)現(xiàn)內(nèi)容隱藏顯示，及圖標(biāo)的切換
}) ;
$(".clsBot").click(function(){
$(this).parent().find("li:gt(4)").toggle(); //實(shí)現(xiàn)內(nèi)容索引值大于4的隱藏或者顯示
})
})
</script>
<style type="text/css">
*{ margin: 0;padding: 0;}
ul li{ list-style: none;}
.box{ width: 400px; margin: 100px auto; border: 1px solid #ddd;}
.tit{ background: #999; height: 30px; color: #fff; font-size: 14px; line-height: 30px; padding-left: 6px; position: relative;}
.closeBtn{ background: url("Images/a2.gif") no-repeat 0 0; width: 7px; height: 8px; position: absolute; right: 10px; top: 10px; display: block; text-indent: -9999px; cursor: pointer;}
.closeBtn2{background: url("Images/a1.gif") no-repeat 0 0;}
.content{padding: 6px;font-size: 12px; overflow: hidden; }
.content li{ float: left; width: 100px; height: 24px; }
.content li a{ color: #999;}
.content li a:hover{ color: red;}
.clsBot{ display: block; clear: both; background: url("Images/a5.gif") no-repeat right 0; padding-right: 16px; float: right; width: 26px; cursor: pointer; color: blue;}
</style>
</head>
<body>
<div class="box">
<div class="tit">
<h2>圖書分類</h2>
<span class="closeBtn">關(guān)閉</span>
</div>
<div class="content">
<ul>
<li><a href="#">小說</a><i> ( 1110 ) </i></li>
<li><a href="#">文藝</a><i> ( 230 ) </i></li>
<li><a href="#">青春</a><i> ( 1430 ) </i></li>
<li><a href="#">少兒</a><i> ( 1560 ) </i></li>
<li><a href="#">生活</a><i> ( 870 ) </i></li>
<li><a href="#">社科</a><i> ( 1460 ) </i></li>
<li><a href="#">管理</a><i> ( 1450 ) </i></li>
<li><a href="#">計(jì)算機(jī)</a><i> ( 1780 ) </i></li>
<li><a href="#">教育</a><i> ( 930 ) </i></li>
<li><a href="#">工具書</a><i> ( 3450 ) </i></li>
<li><a href="#">引進(jìn)版</a><i> ( 980 ) </i></li>
<li><a href="#">其它類</a><i> ( 3230 ) </i></li>
</ul>
<span class="clsBot">簡化</span>
</div>
</div>
</body>
</html>
效果圖：
您可能感興趣的文章:
- 用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過顯示導(dǎo)航下拉列表
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上
- 基于jquery實(shí)現(xiàn)頁面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
- jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果
- jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- jQuery實(shí)現(xiàn)的導(dǎo)航條點(diǎn)擊后高亮顯示功能示例
相關(guān)文章
關(guān)于jQuery.ajax()的jsonp碰上post詳解
這篇文章主要介紹了關(guān)于jQuery.ajax()的jsonp碰上post的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
用jQuery取值，當(dāng)一個(gè)id中含有.時(shí)，這個(gè)時(shí)候正常的取法是做不到的，因此請(qǐng)看下文2014-05-05
這篇文章主要介紹了jQuery中queue()方法用法,實(shí)例分析了queue()方法的功能、定義及使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡易聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法
這篇文章主要介紹了JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法,較為深入的分析了Ajax的post方法出現(xiàn)亂碼的原因,以及具體的解決方法,需要的朋友可以參考下2014-10-10
jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法,可實(shí)現(xiàn)實(shí)時(shí)顯示鼠標(biāo)坐標(biāo)的圖層跟隨鼠標(biāo)運(yùn)動(dòng)的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
使用時(shí)首先依次引用Jquery，Jquery-Ui ，Draggable三個(gè)Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說明請(qǐng)看程序中的注釋。2010-09-09
jQuery控制元素顯示、隱藏、切換、滑動(dòng)的方法總結(jié)
這篇文章主要介紹了jQuery控制元素顯示、隱藏、切換、滑動(dòng)的方法總結(jié),本文講解了hide()、show() 、slideDown、slideUp、 slideToggle、fadeIn()、fadeOut()、fadeTo()等方法使用實(shí)例,需要的朋友可以參考下2015-04-04
前些陣子寫了個(gè)插件目的就是能夠像.net 的 Requst.QuerySting["param"]那樣獲取地址欄參數(shù)?，F(xiàn)在拿出來和大家分享。感覺這個(gè)插件還是蠻有用的。2010-10-10
使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
本文給大家介紹使用js實(shí)現(xiàn)下拉菜單可選擇互相移動(dòng)并實(shí)現(xiàn)菜單排序，代碼簡單易懂，具有參考價(jià)值，需要的朋友參考下吧2016-02-02