《第40天 : JQuery - 手風琴列表》

zhiwei 發(fā)布于2019-08-29 17:10 / 2171人閱讀

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

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

今天要和你們分享的是我看了JQuery庫的手風琴列表樣式。
它的核心在于它的JQuery代碼思想，對于html或者是css都是次要的，在前端中，這種列表十分常用，一起學習起來吧。
開始講解前，為大家做一些知識儲備，在接下來的實操中會用到。

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

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

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

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

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

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

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

接下來分為三個模塊跟大家來講解：

Html模塊：




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


    
        
            //這一層為列表標題欄目，點擊可以展開
                語音技術(shù)voice
                
                    語音識別
                    語音合成
                    語音喚醒
                    智能呼叫中心
                
            
            
                圖像技術(shù)photo
                
                    文字識別
                    圖像識別
                    圖像審核
                    圖像搜索
                
            
            
                人臉與人體識別face
                
                    人臉識別
                    人體分析
                
            
            
                視頻技術(shù)video
                
                    視頻內(nèi)容分析
                    視頻封面選取
                    視頻比對檢索
                    視頻內(nèi)容審核

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)于圖標旋轉(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í)行");
    });
});

以上就是我今天的分享
有時候要學會與未來的自已對話，不要被未來的自已當成陌生人，問未來的自已你想要現(xiàn)在的我：為你做一些什么樣的努力.
希望我們都一直在進步的路上.