jQuery手風(fēng)琴的簡(jiǎn)單制作
首先我們先來(lái)做一個(gè)簡(jiǎn)單的jQuery的效果圖,具體內(nèi)容如下
css代碼 如下:
<style type="text/css" media="screen">
*{margin: 0;padding: 0;}
ul,li{list-style:none}
ul {
width: 300px;
background: yellow;
margin: 50px auto;
}
ul>li{
line-height: 50px;
text-align: center;
border-bottom: 1px solid #ccc;
}
ul>li>ol{
background: blue;
display: none;
}
ul>li>ol>li{
line-height: 50px;
}
</style>
HTML代碼 如下:
<ul id="ul">
<li>
<p>jquery的核心函數(shù)</p>
<ol>
<li>jQuery([selector,[context]])</li>
<li>jQuery(html,[ownerDoc])1.8</li>
<li>jQuery(callback) </li>
<li>jQuery.holdReady(hold)1.6+</li>
</ol>
</li>
<li>
<p>jQuery的效果</p>
<ol>
<li>hide 顯示和隱藏</li>
<li>slideDown 只對(duì)高度有效</li>
<li>fadeIn 淡入效果</li>
<li>slideToggle 淡入和淡出效果</li>
</ol>
</li>
<li>
<p>jQuery的屬性</p>
<ol>
<li>attr 設(shè)置或返回的元素</li>
<li>removeAttr 從每個(gè)元素中刪除一個(gè)元素</li>
<li>prop 獲取第一個(gè)元素的屬性</li>
<li>removeProp prop()方法設(shè)置屬性集</li>
</ol>
</li>
<li>
<p>jQuery的事件</p>
<ol>
<li>off 在元素上移除多個(gè)事件的處理函數(shù)</li>
<li>bind 為每個(gè)元素綁定事件處理函數(shù)</li>
<li>one 為每個(gè)匹配元素綁定一次性處理函數(shù)</li>
<li>trigger 在每個(gè)匹配的元素上觸發(fā)某類(lèi)事件</li>
</ol>
</li>
</ul>
jQuery代碼 如下:
<script src="jquery.min.js" type="text/javascript"charset="utf-8"></script>
<script type="text/javascript">
$("#ul>li>p").click(function(){
$(this).nextAll().slideDown()
.end().parent().siblings()
.children("ol").hide();
});
</script>
效果圖如下:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery插件制作 手風(fēng)琴Panel效果實(shí)現(xiàn)
- 基于jquery的slideDown和slideUp做手風(fēng)琴
- jQuery制作效果超棒的手風(fēng)琴折疊菜單
- jquery手風(fēng)琴特效插件
- jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- 基于JQuery的一句話搞定手風(fēng)琴菜單
- 基于jquery的手風(fēng)琴圖片展示效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)手風(fēng)琴效果
- 精心挑選的12款優(yōu)秀的基于jQuery的手風(fēng)琴效果插件和教程
相關(guān)文章
基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)
下面小編就為大家?guī)?lái)一篇基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06
jquery插件bootstrapValidator表單驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator表單驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)
這篇文章主要介紹了ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
實(shí)現(xiàn)音樂(lè)播放器的代碼(html5+css3+jquery)
這篇文章主要講實(shí)現(xiàn)音樂(lè)播放器的代碼(html5+css3+jquery),需要的朋友可以參考下2015-08-08
jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
jquery中ajax調(diào)用json數(shù)據(jù)的使用說(shuō)明
jquery里提供了便捷的ajax運(yùn)用,下面總結(jié)我自己的一些經(jīng)驗(yàn)2011-03-03
Bookmarklet實(shí)現(xiàn)啟動(dòng)jQuery(模仿 云輸入法)
最近流行的 sogo云輸入法, QQ云輸入法,都用到了bookmarklet技術(shù)。2010-09-09

