最简单的方法是:添加“显示更多”和“显示更少”。
将事件处理程序绑定在这些lis上。
根据列表大小显示/隐藏适当的li。
这是代码:
HTML:
- Body Oil
- Foot Care
- Lip Service
- Massage
- Sunscreen
- Eye Cream
SHOW MORE>>
CSS:.show-more,.show-less{
font-size: 13px;
line-height: 140%;
background-color: rgba(120,120,200,0.5);
display: inline-block;
cursor: pointer;}.hidden{
display: none;}
Jquery:$('.show-more').on('click', function(){
$('.nav-menu li:gt(3)').show();
$('.show-less').removeClass('hidden');
$('.show-more').addClass('hidden');});$('.show-less').on('click', function(){
$('.nav-menu li:gt(3)').hide();
$('.show-more').removeClass('hidden');
$('.show-less').addClass('hidden');});//Show only four itemsif ( $('.nav-menu li').length > 4 ) {
/*$('.nav-menu li:gt(3)').hide();
$('.show-more').removeClass('hidden');
*/
$('.show-less').click();}
我希望这能帮到您