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

時間 2019-12-05

原文原文鏈接

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

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

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

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

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

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

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

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

6.find()方法
返回被選元素的後代元素，能夠指定class爲哪一個名稱。學習

接下來分爲三個模塊跟你們來說解：字體

Html模塊：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜單</title>
    <link rel="stylesheet" type="text/css" href="css/nav.css">//導入css文件
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> //圖標樣式
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/nav.js"></script>
</head>
<body>
    <div>
        <ul id="accordion" class="accordion">
            <li>//這一層爲列表標題欄目，點擊能夠展開
                <div class="link"><i class="fa fa-paint-brush "></i>語音技術voice<i class="fa fa-chevron-down"></i></div>
                <ul  class="submenu">
                    <li><a href="#">語音識別</a></li>
                    <li><a href="#">語音合成</a></li>
                    <li><a href="#">語音喚醒</a></li>
                    <li><a href="#">智能呼叫中心</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-code"></i>圖像技術photo<i class="fa fa-chevron-down"></i></div>
                <ul  class="submenu">
                    <li><a href="#">文字識別</a></li>
                    <li><a href="#">圖像識別</a></li>
                    <li><a href="#">圖像審覈</a></li>
                    <li><a href="#">圖像搜索</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-mobile"></i>人臉與人體識別face<i class="fa fa-chevron-down"></i></div>
                <ul  class="submenu">
                    <li><a href="#">人臉識別</a></li>
                    <li><a href="#">人體分析</a></li>
                </ul>
            </li>
            <li>
                <div class="link"><i class="fa fa-globe"></i>視頻技術video<i class="fa fa-chevron-down"></i></div>
                <ul  class="submenu">
                    <li><a href="#">視頻內容分析</a></li>
                    <li><a href="#">視頻封面選取</a></li>
                    <li><a href="#">視頻比對檢索</a></li>
                    <li><a href="#">視頻內容審覈</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

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，功能爲：下拉列表的出現與消失
        $(this).parent().siblings().children('.submenu').slideUp(500);
        //若是一個列表展開，其餘的兄弟列表就要收起
        $(this).find(".fa-chevron-down").animate().toggleClass("fa-chevron-down-hover");
        //關於圖標旋轉問題，點擊一下旋轉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("方法被執行");
    });
});

以上就是我今天的分享
有時候要學會與將來的自已對話，不要被將來的自已當成陌生人，問將來的自已你想要如今的我：爲你作一些什麼樣的努力.
但願咱們都一直在進步的路上.this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。