摘要:源碼下載地址鏈接提取碼如果有贊就很幸福了今天要和你們分享的是我看了庫的手風(fēng)琴列表樣式。該方法檢查被選元素的可見狀態(tài)。
源碼下載地址:
鏈接:https://pan.baidu.com/s/1x9c1...
提取碼:2bzr
如果有贊就很幸福了.
今天要和你們分享的是我看了JQuery庫的手風(fēng)琴列表樣式。
它的核心在于它的JQuery代碼思想,對于html或者是css都是次要的,在前端中,這種列表十分常用,一起學(xué)習(xí)起來吧。
開始講解前,為大家做一些知識儲備,在接下來的實操中會用到。
1.on()方法:在被選元素及子元素上添加一個或多個事件處理程序,它有三個參數(shù)。
event:事件名稱,例如click.
childSelector:指定的子元素上的事件處理程序,不是選擇器本身.
function:事件發(fā)生時運行的函數(shù).
在實踐中的會這樣體現(xiàn)這個方法:
$(".accordion > li").on("click", ".link", function(){ // }
2.slideToggle()方法
在被選元素上進(jìn)行 slideUp() 和 slideDown() 之間的切換。
該方法檢查被選元素的可見狀態(tài)。
如果一個元素是隱藏的,則運行 slideDown()
如果一個元素是可見的,則運行 slideUp() - 這會造成一種切換的效果。
3.parent()方法
表示當(dāng)前選擇器選中元素的父級
4.childern()方法
表示當(dāng)前選擇器選中元素的子級
5.toggleClass()方法
添加或者移除一個類名
6.find()方法
返回被選元素的后代元素,可以指定class為哪個名稱。
接下來分為三個模塊跟大家來講解:
Html模塊:
菜單 //導(dǎo)入css文件 //圖標(biāo)樣式
- //這一層為列表標(biāo)題欄目,點擊可以展開
語音技術(shù)voice 圖像技術(shù)photo 人臉與人體識別face 視頻技術(shù)video
CSS板塊
* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } /*初始化*/ body { background:#2d2c41; font-family:open sans, Arial, Helvetica, Sans-serif, Verdana, Tahoma; } /*使用什么字體*/ ul { list-style-type:none; /*去掉前面小圓點*/ } .accordion { max-width: 360px; width: 100%; background-color: #ffffff; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius: 4px; margin: 30px auto 20px; } .accordion .link{ cursor: pointer; display: block; padding: 15px 15px 15px 42px; color: #4d4d4d; font-size: 14px; font-weight:700; border-bottom:1px solid #ccc; position:relative; } .accordion li i { position:absolute; top:16px; left:12px; font-size:18px; color:#595959; } .accordion li i.fa-chevron-down { right:12px; left:auto; font-size:16px -webkit-transition:all .4s ease; -o-transition:all .4s ease; transition:all .4s ease } .submenu { display:none; background:#444359; font-size:14px } .display{ display: block; } .submenu li { border-bottom:1px solid #4b4a5e } .submenu a { display:block; text-decoration:none; color:#d9d9d9; padding:12px; padding-left:42px; -webkit-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease } .submenu a:hover { background:#b63b4d; color:#fff; } .fa-chevron-down-hover{ /* JQ對它的操作:點擊后添加這個class,再次點擊后去除這個class*/ -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg) }
JQ部分(重點)
$(function(){ $(".accordion > li").on("click", ".link", function() { $(this).next(".submenu").slideToggle(500); //這里的this代表的就是html模塊中:class為link的div;link的next()就為submenu,功能為:下拉列表的出現(xiàn)與消失 $(this).parent().siblings().children(".submenu").slideUp(500); //如果一個列表展開,其他的兄弟列表就要收起 $(this).find(".fa-chevron-down").animate().toggleClass("fa-chevron-down-hover"); //關(guān)于圖標(biāo)旋轉(zhuǎn)問題,點擊一下旋轉(zhuǎn)180度,再次點擊回來原來的位置 $(this).parent().siblings().children(".link").find(".fa-chevron-down").animate().removeClass("fa-chevron-down-hover"); //除了被點擊的li,所有的li都要去掉fa-chevron-down-hover 這個class console.log("方法被執(zhí)行"); }); });
以上就是我今天的分享
有時候要學(xué)會與未來的自已對話,不要被未來的自已當(dāng)成陌生人,問未來的自已你想要現(xiàn)在的我:為你做一些什么樣的努力.
希望我們都一直在進(jìn)步的路上.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/53214.html
摘要:源碼下載地址鏈接提取碼如果有贊就很幸福了今天要和你們分享的是我看了庫的手風(fēng)琴列表樣式。該方法檢查被選元素的可見狀態(tài)。 showImg(https://segmentfault.com/img/bVbjavP?w=387&h=408); 源碼下載地址:鏈接:https://pan.baidu.com/s/1x9c1... 提取碼:2bzr 如果有贊就很幸福了. 今天要和你們分享的是我看了...
摘要:規(guī)定動畫的時長。注意子菜單要用隱藏,在顯示的時候再設(shè)置。如果不加,實際上子菜單,以及子菜單下面的一直在頁面上,如果鼠標(biāo)移上去子菜單,以及子菜單下面的。 1.前言 在自己的專欄上寫了十幾篇文章了,都是與js有關(guān)的。暫時還沒有寫過關(guān)于css3的文章。css3,給我的感覺就是,不難,但是很難玩轉(zhuǎn)自如。今天,就用css3來實現(xiàn)三個特效,希望這三個特殊能讓大家受到啟發(fā),利用css3做出更好,更炫...
摘要:,通過高度變化向下增大來動態(tài)地顯示所有匹配的元素。,將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。,取得一個包含著所有匹配元素的唯一父元素的元素集合。,隱藏顯示的元素。完成了這幾步之后,我們的手風(fēng)琴菜單就出來了,來看一下我們的效果吧 jQuery手風(fēng)琴制作 說起手風(fēng)琴,想必大家應(yīng)該都知道吧,簡單的來說就是可以來回收縮的這么一個東西,接下來,我就給大家演示一下用jQuery制作一個手風(fēng)琴菜單! ...
摘要:目前插件已超過幾千種,由來自世界各地的開發(fā)者共同編寫驗證和完善。而對于開發(fā)者而言,直接使用這些插件將快速穩(wěn)定架構(gòu)系統(tǒng),節(jié)約項目成本。也就是說,插件也是代碼,通過文件引入的方式植入即可。現(xiàn)在我們就完成了一個下拉菜單的插件。 插件(Plugin)也成為 jQuery 擴展(Extension),是一種遵循一定規(guī)范的應(yīng)用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種,由來自世界...
摘要:,別具一格的手風(fēng)琴菜單的全部代碼的全部代碼溫泉酒店情侶酒店設(shè)計師酒店青年旅舍特色客棧海島酒店海外溫泉基于橫向手風(fēng)琴效果是一款基于實現(xiàn)的左右滑動手風(fēng)琴圖片輪播切換特效。 jQuery,別具一格的手風(fēng)琴菜單 css的全部代碼!!! *{ margin: 0; padding: 0; } .da{ width: 1200px; height: 260px; ...
閱讀 752·2021-09-28 09:35
閱讀 2591·2019-08-29 11:25
閱讀 2154·2019-08-23 18:36
閱讀 1849·2019-08-23 16:31
閱讀 2065·2019-08-23 14:50
閱讀 3112·2019-08-23 13:55
閱讀 3286·2019-08-23 12:49
閱讀 2074·2019-08-23 11:46