锋利的JQuery 实例1--- JQuery实现可折叠导航栏

效果如图

目录 1.写好 style 2.写好 div 3.写好 script

在引用好jquery之后

1

<style type="text/css"> .a{ text-decoration:none; display:block; } .link{ background-color:#C2C2BC; } .level1{ border:1px solid #eee; } .level2{ display:none; } div{ width:150px; text-align:center; } </style> <div class="box"> <div class="menu"> <div class="level1"> <a href="javascript:;" data="衬衫">衬衫</a> <div class="level2"> <div><a href="javascript:;">短袖衬衫</a></div> <div><a href="javascript:;">长袖衬衫</a></div> <div><a href="javascript:;">短袖T恤</a></div> <div><a href="javascript:;">长袖T恤</a></div> </div> </div> <div class="level1"> <a href="javascript:;" data="卫衣">卫衣</a> <div class="level2"> <div><a href="javascript:;">开襟卫衣</a></div> <div><a href="javascript:;">套头卫衣</a></div> <div><a href="javascript:;">运动卫衣</a></div> <div><a href="javascript:;">童装卫衣</a></div> </div> </div> <div class="level1"> <a href="javascript:;" data="裤子">裤子</a> <div class="level2"> <div><a href="javascript:;">短裤</a></div> <div><a href="javascript:;">休闲裤</a></div> <div><a href="javascript:;">牛仔裤</a></div> <div><a href="javascript:;">免烫卡其裤</a></div> </div> </div> </div> </div> <script type="text/javascript"> var Mxx = function () { var initData = function () { $(".level1>a").bind('click', function () { $(this).toggleClass("link"); $(this).next().slideToggle(); }); }; return { init: function () { initData(); } }; }(); $("document").ready(function () { Mxx.init(); })

或者

$("document").ready(function () { // Mxx.init(); $(".level1>a").live('click', function () { $(this).toggleClass("link"); $(this).next().slideToggle(); }); }