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ā)某類事件</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)文章
ztree實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容詳情功能
zTree 是利用 JQuery 的核心代碼,實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件。接下來(lái)通過(guò)本文給大家分享ztree實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容詳情功能,需要的朋友參考下吧2017-11-11JQuery實(shí)現(xiàn)Ajax加載圖片的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)Ajax加載圖片的方法,涉及jQuery基于緩存獲取圖片的技巧,需要的朋友可以參考下2015-12-12基于jquery和svg實(shí)現(xiàn)超炫酷的動(dòng)畫特效
這篇文章主要介紹了基于jquery和svg實(shí)現(xiàn)超炫酷的動(dòng)畫特效,想學(xué)習(xí)SVG的童鞋們可以來(lái)參考下。2014-12-12jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能
圖片上傳,網(wǎng)上有好多版本,今天小編給大家分享jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能,感興趣的的朋友一起看看吧2017-08-08jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊上方文字即可在下方勾選處文本框顯示對(duì)應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05jQuery旋轉(zhuǎn)插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
網(wǎng)上發(fā)現(xiàn)一個(gè)很有意思的jQuery旋轉(zhuǎn)插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高級(jí)瀏覽器下使用Transform,低版本ie使用VML實(shí)現(xiàn),感興趣的朋友可以了解下2013-01-01jQuery簡(jiǎn)單創(chuàng)建節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery簡(jiǎn)單創(chuàng)建節(jié)點(diǎn)的方法,涉及jQuery獲取節(jié)點(diǎn)及append添加元素創(chuàng)建節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2016-09-09