HTML如何实现查看更多的,快速简单实现查看更多功能

近期遇到需要根据屏幕宽度展示不同数量item，且需要收缩展开功能，记录一下

Document

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

.wrap {

width: 40vw;

height: 40vh;

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: repeat(3, 1fr);

}

@media screen and (max-width: 800px) {

.wrap .item:nth-of-type(n + 1) {

display: none;

}

}

@media screen and (max-width: 1500px) {

.wrap .item:nth-of-type(n + 2) {

display: none;

}

}

@media screen and (max-width: 1800px) {

.wrap .item:nth-of-type(n + 3) {

display: none;

}

}

.box .item {

display: block!important;

}

.show {

width: 100px;

height: 50px;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

显示更多

$('.show').click(()=> {

if (!$('.wrap').hasClass('box')) {

$('.wrap').addClass('box')

} else {

$('.wrap').removeClass('box')

}

})