快捷導(dǎo)航

jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表

更新時(shí)間：2015年08月10日 16:47:20 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表的方法,涉及jquery鼠標(biāo)事件及節(jié)點(diǎn)的遍歷與屬性操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表。分享給大家供大家參考。具體如下：

這里使用jquery實(shí)現(xiàn)展開、隱藏特效，點(diǎn)擊列表標(biāo)題后該項(xiàng)內(nèi)容展開，其它項(xiàng)收縮起來，也就是不顯示了。個(gè)人喜好了，有的喜歡在默認(rèn)狀態(tài)下不顯示其它選項(xiàng)的內(nèi)容，這個(gè)就是這種情況，僅供參考吧。

運(yùn)行效果截圖如下：

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js點(diǎn)擊展開列表</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<script type="text/javascript">
// 收縮展開效果
$(document).ready(function(){
$('.box').click(function(){
$(this).children('.text').slideToggle().parents('.box').siblings('.box').children('.text').hide();
})  
});
</script>
<style type="text/css">
.box{width:200px; margin:0 auto; background:#CCC;}
.text{display:none;}
</style>
<body>
<div class="box">
  <h2>對(duì)ASP擅長的程序</h2>
  <div class="text">論壇類和文章類</div>
  </div>
</div>
<div class="box">
  <h2>對(duì)PHP擅長的程序</h2>
  <div class="text">博客類和新聞?lì)?lt;/div>
  </div>
</div>
<div class="box">
  <h2>對(duì)前端擅長的插件</h2>
  <div class="text">jquery</div>
  </div>
</div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)360°全景拖動(dòng)展示
360全景就是視角超過人的正常視角的圖像，而我們這里說的全景特指水平視角360度，垂直視角180度的圖像?？梢匀翱臻g里進(jìn)行切換，達(dá)到瀏覽各個(gè)不同場景360全景展示的目的。
2015-03-03
jQuery圓形統(tǒng)計(jì)圖開發(fā)實(shí)例
這篇文章主要介紹了jQuery圓形統(tǒng)計(jì)圖開發(fā)的方法,實(shí)例分析了circliful插件的用法與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
jquery控制頁面部分刷新的方法
這篇文章主要介紹了jquery控制頁面部分刷新的方法,涉及jQuery中l(wèi)oad方法的使用技巧,需要的朋友可以參考下
2015-06-06
使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
這篇文章主要介紹了使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版,需要的朋友可以參考下
2014-06-06
jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼,可實(shí)現(xiàn)實(shí)時(shí)顯示評(píng)論效果的功能,基于Ajax實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
JQuery的read函數(shù)與js的onload不同方式實(shí)現(xiàn)
JQuery的read函數(shù)與js的onload，想必大家對(duì)這兩個(gè)方法都有所熟悉吧，接下來介紹一個(gè)實(shí)例用以上兩種方法各自實(shí)現(xiàn)，感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你
2013-03-03
基于jQuery實(shí)現(xiàn)左右圖片輪播（原理通用）
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)左右圖片輪播，實(shí)現(xiàn)原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery Clone Bug解決代碼
jQuery Clone Bug解決代碼，具體看測試代碼。
2010-12-12
StringTemplate遇見jQuery沖突的解決方法
最近在做一個(gè)流程引擎，現(xiàn)著手于自定義模板的處理。設(shè)計(jì)在模板中所有的數(shù)據(jù)都將與字段對(duì)應(yīng)，采用xml結(jié)構(gòu)序列化作為流程持久化機(jī)制。
2011-09-09
jquery圖片輪播特效代碼分享
這篇文章主要為大家詳細(xì)介紹了jquery簡單圖片輪播特效，圖片輪播效果特別適合做產(chǎn)品展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-09-09