JQuery鏈式操做簡單的菜單列表

    看到這個簡單的菜單demo，也是爲了再看看JQuery對DOM的操做，一直都記不牢，特別是siblings（）這個老是想不起來。

此次再過一遍JQuery，無論簡單的仍是複雜的demo 仍是堅持練習一遍吧！只爲記錄，若是同時能給你提供幫助，這樣最好！

 

<style>
        .wrap{
            width: 100%;
        }
        .inner{
            width: 62.5%;
            margin: auto;
            padding: 50px;
            border:1px solid #ccc;
            box-sizing:border-box;
        }
        .menu{
            width: 100%;
        }
        .sub-nav{
            cursor: pointer;
            color: #333;
            font-size: 16px;
            font-weight: bold;
            padding: 5px;
            background: #ccc;
            overflow: hidden;
        }
        a{
            float: left;
            width: 100%;
            background: #333;
            color: #fff;
            padding: 5px;
            display: none;
        }
        .light{
            color: #3c763d;
            background: #999999;
        }
    </style>

上面css沒有寫的多麼嚴禁，樣式就一帶而過吧。

<div class="wrap">
        <div class="inner">
            <div class="menu">
                <div class="sub-nav">
                    <span>The first chapter</span>
                    <a href="javascript:;">The first section</a>
                    <a href="javascript:;">The second section</a>
                    <a href="javascript:;">The third section</a>
                    <div style="clear: both;"></div>
                </div>
                <div class="sub-nav">
                    <span>The second chapter</span>
                    <a href="javascript:;">The first section</a>
                    <a href="javascript:;">The second section</a>
                    <a href="javascript:;">The third section</a>
                    <div style="clear: both;"></div>
                </div>
                <div class="sub-nav">
                    <span>The third chapter</span>
                    <a href="javascript:;">The first section</a>
                    <a href="javascript:;">The second section</a>
                    <a href="javascript:;">The third section</a>
                    <div style="clear: both;"></div>
                </div>
            </div>
        </div>
    </div>

一樣的也沒什麼多描述的。就一坨放在這裏了。

<script>
        $(function () {
            $('.sub-nav').click(function () {
                $(this).addClass('light').children('a').show().end().siblings().removeClass('light').children('a').hide();
            })
        })
    </script>

不一樣的代碼風格 看起來確定溫馨度不同，這樣一口氣的真頭大。爲了加強記憶一個一個的分析下。

提倡一行寫一個操做。

2017-02-08