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