我正在尝试找到一个jQuery解决方案,在左侧导航过滤器中显示每个菜单上的前3个项目,并显示“显示更多”和“显示更少”链接,以便用户扩展列表.
我已经搜索了一个解决方案,但大多数展开/折叠脚本完整隐藏图层,而其他人显示展开(显示更多)链接但不切换显示折叠(显示更少)链接.
我的菜单编码如下.
@H_404_6@<div id="menu1"> <ul class="term-list"> <li class="term-item ">Item 1</li> <li class="term-item ">Item 2</li> <li class="term-item ">Item 3</li> <li class="term-item ">Item 4</li> </ul> </div> <div id="menu2"> <ul class="term-list"> <li class="term-item ">Item 1</li> <li class="term-item ">Item 2</li> <li class="term-item ">Item 3</li> <li class="term-item ">Item 4</li> </ul> </div>解决方法
jsBin demo
这是一个基本的例子：
@H_404_6@$('ul.term-list').each(function(){ var LiN = $(this).find('li').length; if( LiN > 3){ $('li',this).eq(2).nextAll().hide().addClass('toggleable'); $(this).append('<li class="more">More...</li>'); } }); $('ul.term-list').on('click','.more',function(){ if( $(this).hasClass('less') ){ $(this).text('More...').removeClass('less'); }else{ $(this).text('Less...').addClass('less'); } $(this).siblings('li.toggleable').slideToggle(); });或者更多compact version.
