html元素隐藏不改变结构,仅显示前4个html元素并使用Javascript [暂停]隐藏其余元素...

最简单的方法是：添加“显示更多”和“显示更少”。

将事件处理程序绑定在这些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();}

我希望这能帮到您