国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《第40天 : JQuery - 手風(fēng)琴列表》

songze / 2908人閱讀

摘要：源碼下載地址鏈接提取碼如果有贊就很幸福了今天要和你們分享的是我看了庫(kù)的手風(fēng)琴列表樣式。該方法檢查被選元素的可見(jiàn)狀態(tài)。

源碼下載地址：
鏈接：https://pan.baidu.com/s/1x9c1...
提取碼：2bzr
如果有贊就很幸福了.

今天要和你們分享的是我看了JQuery庫(kù)的手風(fēng)琴列表樣式。
它的核心在于它的JQuery代碼思想，對(duì)于html或者是css都是次要的，在前端中，這種列表十分常用，一起學(xué)習(xí)起來(lái)吧。
開(kāi)始講解前，為大家做一些知識(shí)儲(chǔ)備，在接下來(lái)的實(shí)操中會(huì)用到。

1.on()方法：在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序，它有三個(gè)參數(shù)。
event：事件名稱，例如click.
childSelector:指定的子元素上的事件處理程序,不是選擇器本身.
function:事件發(fā)生時(shí)運(yùn)行的函數(shù).
在實(shí)踐中的會(huì)這樣體現(xiàn)這個(gè)方法：

$(".accordion > li").on("click", ".link", function(){ // }

2.slideToggle()方法
在被選元素上進(jìn)行 slideUp() 和 slideDown() 之間的切換。
該方法檢查被選元素的可見(jiàn)狀態(tài)。
如果一個(gè)元素是隱藏的，則運(yùn)行 slideDown()
如果一個(gè)元素是可見(jiàn)的，則運(yùn)行 slideUp() - 這會(huì)造成一種切換的效果。

3.parent()方法
表示當(dāng)前選擇器選中元素的父級(jí)

4.childern()方法
表示當(dāng)前選擇器選中元素的子級(jí)

5.toggleClass()方法
添加或者移除一個(gè)類名

6.find()方法
返回被選元素的后代元素，可以指定class為哪個(gè)名稱。

接下來(lái)分為三個(gè)模塊跟大家來(lái)講解：

Html模塊：



    
    菜單
    //導(dǎo)入css文件
     //圖標(biāo)樣式
    
    


    

        
    



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; /*去掉前面小圓點(diǎn)*/
}
.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對(duì)它的操作：點(diǎn)擊后添加這個(gè)class，再次點(diǎn)擊后去除這個(gè)class*/
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)
}
JQ部分（重點(diǎn)）
$(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);
        //如果一個(gè)列表展開(kāi)，其他的兄弟列表就要收起
        $(this).find(".fa-chevron-down").animate().toggleClass("fa-chevron-down-hover");
        //關(guān)于圖標(biāo)旋轉(zhuǎn)問(wèn)題，點(diǎn)擊一下旋轉(zhuǎn)180度，再次點(diǎn)擊回來(lái)原來(lái)的位置
        $(this).parent().siblings().children(".link").find(".fa-chevron-down").animate().removeClass("fa-chevron-down-hover");
        //除了被點(diǎn)擊的li，所有的li都要去掉fa-chevron-down-hover 這個(gè)class
        console.log("方法被執(zhí)行");
    });
});

以上就是我今天的分享
有時(shí)候要學(xué)會(huì)與未來(lái)的自已對(duì)話，不要被未來(lái)的自已當(dāng)成陌生人，問(wèn)未來(lái)的自已你想要現(xiàn)在的我：為你做一些什么樣的努力.
希望我們都一直在進(jìn)步的路上.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/53214.html

相關(guān)文章

  • 《第40天 : JQuery - 手風(fēng)琴列表》

    摘要：源碼下載地址鏈接提取碼如果有贊就很幸福了今天要和你們分享的是我看了庫(kù)的手風(fēng)琴列表樣式。該方法檢查被選元素的可見(jiàn)狀態(tài)。 showImg(https://segmentfault.com/img/bVbjavP?w=387&h=408); 源碼下載地址：鏈接：https://pan.baidu.com/s/1x9c1... 提取碼：2bzr 如果有贊就很幸福了. 今天要和你們分享的是我看了...

    zhiwei 評(píng)論0 收藏0

  • CSS3熱身實(shí)戰(zhàn)--過(guò)渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無(wú)縫滾動(dòng)）

    摘要：規(guī)定動(dòng)畫的時(shí)長(zhǎng)。注意子菜單要用隱藏，在顯示的時(shí)候再設(shè)置。如果不加，實(shí)際上子菜單，以及子菜單下面的一直在頁(yè)面上，如果鼠標(biāo)移上去子菜單，以及子菜單下面的。 1.前言 在自己的專欄上寫了十幾篇文章了，都是與js有關(guān)的。暫時(shí)還沒(méi)有寫過(guò)關(guān)于css3的文章。css3，給我的感覺(jué)就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來(lái)實(shí)現(xiàn)三個(gè)特效，希望這三個(gè)特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫...

    zqhxuyuan 評(píng)論0 收藏0

  • jQuery手風(fēng)琴制作

    摘要：，通過(guò)高度變化向下增大來(lái)動(dòng)態(tài)地顯示所有匹配的元素。，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。，取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合。，隱藏顯示的元素。完成了這幾步之后，我們的手風(fēng)琴菜單就出來(lái)了，來(lái)看一下我們的效果吧 jQuery手風(fēng)琴制作 說(shuō)起手風(fēng)琴，想必大家應(yīng)該都知道吧，簡(jiǎn)單的來(lái)說(shuō)就是可以來(lái)回收縮的這么一個(gè)東西，接下來(lái)，我就給大家演示一下用jQuery制作一個(gè)手風(fēng)琴菜單！ ...

    muddyway 評(píng)論0 收藏0

  • jQuery入門筆記之（七）插件

    摘要：目前插件已超過(guò)幾千種，由來(lái)自世界各地的開(kāi)發(fā)者共同編寫驗(yàn)證和完善。而對(duì)于開(kāi)發(fā)者而言，直接使用這些插件將快速穩(wěn)定架構(gòu)系統(tǒng)，節(jié)約項(xiàng)目成本。也就是說(shuō)，插件也是代碼，通過(guò)文件引入的方式植入即可?，F(xiàn)在我們就完成了一個(gè)下拉菜單的插件。 插件(Plugin)也成為 jQuery 擴(kuò)展(Extension)，是一種遵循一定規(guī)范的應(yīng)用程序接口編寫出來(lái)的程序。目前 jQuery 插件已超過(guò)幾千種，由來(lái)自世界...

    defcon 評(píng)論0 收藏0

  • jQuery，別具一格的手風(fēng)琴菜單

    摘要：，別具一格的手風(fēng)琴菜單的全部代碼的全部代碼溫泉酒店情侶酒店設(shè)計(jì)師酒店青年旅舍特色客棧海島酒店海外溫泉基于橫向手風(fēng)琴效果是一款基于實(shí)現(xiàn)的左右滑動(dòng)手風(fēng)琴圖片輪播切換特效。 jQuery，別具一格的手風(fēng)琴菜單 css的全部代碼！！！ *{ margin: 0; padding: 0; } .da{ width: 1200px; height: 260px; ...

    cncoder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<