jquery展开、折叠菜单,支持一键展开、折叠
之前有朋友问到,趁现在无聊(主要是太久没更新),来简单说一下这个jquery展开、折叠菜单,其实大家也可以右键直接看源码的。
这主要是三部分,html、css、jquery:
HTML部分
<div class="switch"> <span id="al_expand_collapse">全部展开/折叠</span><em> (注:点击月份可以展开.)</em> </div> <div id="archives"> <ul class="al_mon_list"> <li> <span class="al_mon">2016年07月<em>( 2篇文章 )</em></span> <ul class="al_post_list"> <li><time>31日:</time><a href="https://www.songhaifeng.com/weiyu/76.html" title="2016.07.31">2016.07.31</a><span class="muted"><em>(0)</em></span></li> <li><time>12日:</time><a href="https://www.songhaifeng.com/xqsb/75.html" title="找呀找呀找工作">找呀找呀找工作</a><span class="muted"><em>(7)</em></span></li> </ul> </li> </ul> <ul class="al_mon_list"> <li> <span class="al_mon">2016年07月<em>( 2篇文章 )</em></span> <ul class="al_post_list" style="display: none;"> <li><time>31日:</time><a href="https://www.songhaifeng.com/weiyu/76.html" title="2016.07.31">2016.07.31</a><span class="muted"><em>(0)</em></span></li> <li><time>12日:</time><a href="https://www.songhaifeng.com/xqsb/75.html" title="找呀找呀找工作">找呀找呀找工作</a><span class="muted"><em>(7)</em></span></li> </ul> </li> </ul> </div>
CSS部分
.switch>em{font-weight: 600;color: #777;} .switch{padding-bottom:16px;} #al_expand_collapse{cursor: pointer;background: #58749C;color: #FFFFFF;font-weight: 700;font-size: 14px;padding: 6px 6px;margin-left: 20px;border-radius: 3px 3px 3px 3px;} #archives>ul>li{list-style: none !important;padding: 0 20px 12px 20px;margin-left: 0px !important;} #archives>ul>li>ul>li{list-style: none !important;padding: 6px 0;border-bottom: 1px solid #CCC;} .al_mon_list {width: 100%;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} #archives .al_mon_list li .al_mon {border-left: 3px solid #58749c;padding-left: 10px;font-weight: 700;display: block;border-bottom: 1px solid #CCC;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;} #archives .al_mon_list li .al_mon em{font-weight: 400;color: #777;}
JQUERY部分
(function($, window) { $(function() { var $a = $('#archives'), $m = $('.al_mon', $a), $l = $('.al_post_list', $a), $l_f = $('.al_post_list:first', $a); $l.hide(); $l_f.show(); $m.css('cursor', 'pointer').on('click', function() { $(this).next().slideToggle(400); }); var animate = function(index, status, s) { if (index > $l.length) { return; } if (status == 'up') { $l.eq(index).slideUp(s, function() { animate(index + 1, status, (s - 10 < 1) ? 0 : s - 10); }); } else { $l.eq(index).slideDown(s, function() { animate(index + 1, status, (s - 10 < 1) ? 0 : s - 10); }); } }; $('#al_expand_collapse').on('click', function(e) { e.preventDefault(); if ($(this).data('s')) { $(this).data('s', ''); animate(0, 'up', 100); } else { $(this).data('s', 1); animate(0, 'down', 100); } }); }); })(jQuery, window);
没什么好说的,只是方便一些新手朋友的操作而已。
上面代码都是在本站点上直接copy过来的,有需要的朋友拿去用时候可以根据自己要求更改样式即可。
排队形 感觉好折腾
感觉好折腾