"日40：jQueryの - アコーディオンリスト" - コードワールド

画像のキャプション

ソースをダウンロード：
リンク：HTTPS：//pan.baidu.com/s/1x9c1 ...
抽出コード：2bzr
非常に幸せな賞賛がある場合。

あなたと共有するために、今日は私がアコーディオンjQueryライブラリリストのスタイルを見たということです。
その核となるアイデアは、HTMLやCSSのそれのjQueryのコードは、二次的であるフロントエンドでは、このようなリストは非常に一般的であり、それを一緒に学ぶことです。
あなたが説明し始める前に、私たちは、取得したいくつかの知識がそうであるように、次の実用的な操作が使用されます。

1.On（）メソッド：それは3つのパラメータを有し、選択された要素およびサブ要素に1つ以上のイベントハンドラを追加します。
イベント：イベント名、クリックなど。
childSelector：指定された子要素にイベントハンドラではなく、選択肢自体
の機能:.関数は、イベントが発生したときに実行するために
、この方法ので、実際に反映されます。

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

2.slideToggle（）メソッド
slideUpための（）と選択された要素にslideDown（）との間の切り替え。
この方法は、可視選択された要素の状態をチェックします。
要素が隠れている場合、それは（slideDownを実行する）
要素が表示されている場合、slideUp（）を実行-ハンドオーバの効果をもたらします。

3.parent（）メソッドは、
現在選択されている要素セレクタ親を示します

4.childern（）メソッドは、
セレクタ子要素によって選択された電流を表します

5.toggleClass（）メソッド
のクラス名を追加または削除します

6.find（）メソッドは、
クラス名として指定することができ、選択された要素の子孫要素を返します。

あなたと次の3つのモジュールを説明します：

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("方法被执行");
    });
});

それは、今日はすべて私のシェアである
あなたが努力のいくつかの種類を行うには：時々、自分の将来に話を学ばなければならないあなたは今私を聞いてみたい、自分の将来、自分の将来として見知らぬ人はいけない
、私たちがされているにしたいです道に進みます。

"日40：jQueryの - アコーディオンリスト"

おすすめ