html按钮占一半屏幕,javascript-自适应设计-仅在较小的屏幕上显示“更多”按钮...

当页面宽度小于指定数量时,可以使用CSS @media隐藏/显示元素.

HTML：

here is some content.

here is some extra content

Show More

CSS：

@media (max-width: 650px) {

.extra_content {

display: none;

}

#read_more {

display: block;

}

}

.read_more {

display: none;

}

.show {

display: block!important;

}

纯JavaScript：

document.getElementById("read_more").addEventListener( 'click' , changeClass);

function changeClass() {

var content = document.getElementById("extra_content");

var btn = document.getElementById("read_more");

content.classList.toggle('show');

if (content.classList.contains("show")) {

btn.innerHTML = "Show Less";

} else {

btn.innerHTML = "Show More";

}

}

使用多个按钮

要使用多个按钮来实现此目的,我们需要对内容进行一些修改.

基本上,我们需要使用一个通用类查询按钮元素,并在它们上循环以分配click事件并更改innerHtml.例如：

Show More

here is some content.

here is some extra content

Show More

document.querySelectorAll("button.read_more").forEach(function(button) {

button.addEventListener( 'click' , changeClass);

});

function changeClass() {

var content = document.getElementById("extra_content");

var buttons = document.querySelectorAll("button.read_more");

content.classList.toggle("show");

var buttonText = content.classList.contains("show") ? "Show Less" : "Show More";

buttons.forEach(function(button) {

button.innerHTML = buttonText;

});

}