OnClick 事件以创建一个"显示更多"样式的内容框，该框会随着您单击按钮而扩展和缩小

Question

我不知道为什么这不起作用。是我写id名和类名的方式吗?我这样写是为了演示。

我检查了拼写，到目前为止，一切正常。非常感谢您的帮助。我在某个地方读到，它总是推荐使用:

content.classList.add("open")

代替:

content.className = "open"

，因为后者可以消除存在于content元素中的所有其他类。

下面是我的代码:

let contentVar = document.getElementById("idOfcontent");
let buttonVar = document.getElementById("idOfshowmore");
buttonVar.onclick = function() {
if (contentVar.className == "classOfopen") {
// shrink the box
contentVar.className = "";
buttonVar.innerHTML = "Show More";
} else {
// expand the box
contentVar.className = "classOfopen";
buttonVar.innerHTML = "Show Less";
}
}

body {
background: #eee;
}
#idOfcontent {
width: 400px;
background: #ffff;
padding: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 18px;
color: #444;
margin: 0 auto;
max-height: 100px;
overflow: hidden;
/* Set transitions up */
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#idOfcontent .classOfopen {
max-height: 5000px;
/* Set transitions up */
/* for smooth transition */
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#idOfshowmore {
background: #1594e5;
color: #ffffff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: block;
width: 140px;
font-size: 17pxx;
text-transform: uppercase;
padding: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}

<div id="idOfcontent">
<p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p>
<p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p>
<p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more
than one HTML element.</p>
</div>
<a id="idOfshowmore">Show More</a>

Answer 1

你的CSS选择器错误

#idOfcontent .classOfopen

选择#idOfcontent的子类，类为classOfopen。你想要的是:

#idOfcontent.classOfopen

元素的id为idOfcontent，类为classOfopen。

另一个注意事项，最好使用classList而不是直接编辑className。一旦您尝试一次操作多个类，这一点就会变得清晰起来。

Answer 2

这是你的固定代码片段，

let contentVar = document.getElementById("idOfcontent");
let buttonVar = document.getElementById("idOfshowmore");
buttonVar.onclick = function() {
if (contentVar.className == "classOfopen") {
// shrink the box
contentVar.className = "";
buttonVar.innerHTML = "Show More";
} else {
// expand the box
contentVar.classList.add('classOfopen');  /* classList.add() is the correct way of adding classes */
buttonVar.innerHTML = "Show Less";
}
}

body {
background: #eee;
}
#idOfcontent {
width: 400px;
background: #ffff;
padding: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 18px;
color: #444;
margin: 0 auto;
max-height: 100px;
overflow: hidden;
/* Set transitions up */
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#idOfcontent.classOfopen { /* <- removed the space */
max-height: 1000px;
/* Set transitions up */
/* for smooth transition */
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#idOfshowmore {
background: #1594e5;
color: #ffffff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: block;
width: 140px;
font-size: 17pxx;
text-transform: uppercase;
padding: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}

<div id="idOfcontent">
<p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p>
<p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p>
<p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more
than one HTML element.</p>
</div>
<a id="idOfshowmore">Show More</a>

但不建议使用max-height用于手风琴框，或使用easing或animation的折叠框。你可以阅读这个博客来帮助你解决手风琴关闭前的延迟

Answer 3

选择器中有一个空格:

#idOfcontent .classOfopen应为#idOfcontent.classOfopen。带空格的版本选择类为classOfOpen的(孙子)子，而第二个版本引用ID为idOfcontent的元素，类为classOfOpen。

let contentVar = document.getElementById("idOfcontent");
let buttonVar = document.getElementById("idOfshowmore");
buttonVar.onclick = function() {
if (contentVar.className == "classOfopen") {
// shrink the box
contentVar.className = "";
buttonVar.innerHTML = "Show More";
} else {
// expand the box
contentVar.className = "classOfopen";
buttonVar.innerHTML = "Show Less";
}
}

body {
background: #eee;
}
#idOfcontent {
width: 400px;
background: #ffff;
padding: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 18px;
color: #444;
margin: 0 auto;
max-height: 100px;
overflow: hidden;
/* Set transitions up */
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#idOfcontent.classOfopen {
max-height: 5000px;
/* Set transitions up */
/* for smooth transition */
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#idOfshowmore {
background: #1594e5;
color: #ffffff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: block;
width: 140px;
font-size: 17pxx;
text-transform: uppercase;
padding: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}

<div id="idOfcontent">
<p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p>
<p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p>
<p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more
than one HTML element.</p>
</div>
<a id="idOfshowmore">Show More</a>