这是我的代码，但我不知道如何调试。请帮助我和我的代码。我正试图为我的内容列表添加一个隐藏/显示按钮，但我不知道它出了什么问题。非常感谢。嗯。。。我不知道该说什么，因为我必须补充更多信息。只需评论即可询问任何疑问。
<!DOCTYPE html>
<html>
<head>
<title>How to be Asian</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
border: 0px;
margin: 2px;
}
h2
{
text-indent: 20px;
}
ul {
margin-top: 2%;
}
body {
margin: 2px;
border: 5px;
padding: 13px;
}
#Contents {
display: table;
padding: 7px;
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
font-size: 95%;
text-align: left;
float: right;
width: 15%;
}
#Quote {
text-align: center;
line-height: 2em;
padding-left: 25%;
padding-right: 25%;
padding-top: 20px;
padding-bottom: 20px;
display: block;
}
.Bonus {
display: inline;
font-size: 1.3em;
}
body{
padding: 1%;
margin: 1%
}
p h1{
display: inline;
float: left;
}
</style>
</head>
<body>
<script>
function myFunction() {
var x = document.getElementById("Contents");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div id="Contents">
<h1 id="Contents">Contents</h1><button onclick="myFunction()">[show]</button>
<ol>
<li><a href="#Chapter_1">Chapter 1: Early Childhood</a></li>
<li><a href="#Chapter_2">Chapter 2: Primary School Education</a></li>
<li><a href="#Chapter_3">Chapter 3: High School Education</a></li>
<li><a href="#Chapter_4">Chapter 4: College/University Education</a></li>
<li><a href="#Chapter_5">Chapter 5: Employment</a></li>
<li><a href="#Chapter_6">Chapter 6: Relationships</a></li>
<li><a href="#Chapter_7">Chapter 7: Family Gatherings</a></li>
<ol>
<li><a href="#Chapter_7.1">Chapter 7.1: Public Holidays</a></li>
<li><a href="#Chapter_7.2">Chapter 7.2: Death and mourning</a></li>
</ol>
<li><a href="#Chapter_8">Chapter 8: Retirement</a></li>
<li><a href="#Chapter_9">Chapter 9: Death</a></li>
</ol>
</div>
<div>
<h1 id="Chapter_1">Chapter 1: Early Childhood</h1>
<p>When Asian kids go through pre-schooling years and primary school, children are always put under pressure and always neglected so that they work harder and feel like they are worth something after some time and not actually useless.<br><span id="Quote">"We just never praise our children, always compare them to people who are better, so they grow up never feeling good enough and then have to constantly outdo everybody else to feel like they aren’t worthless." <br> Quoted from Stven He's father</span></p>
</div>
<div>
<h1 id="Chapter_2">Chapter 2: Primary School Education</h1>
<p>Asian kids are always compared to their peers by their parents. This is because Asian parents want the best of the child. This also means that children are used too much for the simplest of their demands. <br> <br> During this period of learning, PTSD is most used so that children are trained to cope "in the future". "In the future" meaning whenever you go back to your parents house when you are and adult. But this training will deal emotional damage, social anxiety and negliegence. This part of life is when most of the tactics are used so that the child can get used to them. Once they know how to leave the situation, create more problems for the child so that they get more experience. </p>
<p>This period of their life is when you can take advantage of them. For example, when you are shopping, tell your child that you are going to get something common in the household, like rice. Then, go to the aisle and watch them go to the cashier person and panic as you are assumed to get rice. Once they start getting constipated, go back with a 5kg bag of rice and start telling your child off for constipating in public. </p>
<div style="text-align: center;">
<h4 class="Bonus">BONUS! </h4><p class="Bonus">If you can humiliate your child in front of anyone, especially your child's friends, it will intergrate information for life. </p>
</div>
</div>
<div>
<h1 id="Chapter_3">Chapter 3: High School Education</h1>
<p>This period of life is when you get to choose his choices. </p>
</div>
<div>
<h1 id="Chapter_4">Chapter 4: College/University Education</h1>
</div>
<div>
<h1 id="Chapter_5">Chapter 5: Employment</h1>
</div>
<div>
<h1 id="Chapter_6">Chapter 6: Relationships</h1>
</div>
<div>
<h1 id="Chapter_7">Chapter 7: Family Gatherings</h1>
<h2 id="Chapter_7.1">Chapter 7.1: Public Holidays</h2>
<h2 id="Chapter_7.2">Chapter 7.2: Death and mourning</h2>
</div>
<div>
<h1 id="Chapter_8">Chapter 8: Retirement</h1>
</div>
<div>
<h1 id="Chapter_9">Chapter 9: Death</h1>
</div>
</body>
</html>
我运行了你的代码，它的功能很好，但按钮与div一起隐藏。我想这就是你所指的问题。
现在有几件事。
- id应该被视为唯一的，所以不要给许多标签提供相同的id，而是使用class
- 隐藏内容的按钮需要位于要隐藏的容器之外
<!DOCTYPE html>
<html>
<head>
<title>How to be Asian</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
border: 0px;
margin: 2px;
}
h2
{
text-indent: 20px;
}
ul {
margin-top: 2%;
}
body {
margin: 2px;
border: 5px;
padding: 13px;
}
#Contents {
display: table;
padding: 7px;
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
font-size: 95%;
text-align: left;
float: right;
width: 15%;
}
#Quote {
text-align: center;
line-height: 2em;
padding-left: 25%;
padding-right: 25%;
padding-top: 20px;
padding-bottom: 20px;
display: block;
}
.Bonus {
display: inline;
font-size: 1.3em;
}
body{
padding: 1%;
margin: 1%
}
p h1{
display: inline;
float: left;
}
</style>
</head>
<body>
<script>
function myFunction() {
var x = document.getElementById("Contents");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<button onclick="myFunction()">[show]</button>
<div id="Contents">
<h1>Contents</h1>
<ol>
<li><a href="#Chapter_1">Chapter 1: Early Childhood</a></li>
<li><a href="#Chapter_2">Chapter 2: Primary School Education</a></li>
<li><a href="#Chapter_3">Chapter 3: High School Education</a></li>
<li><a href="#Chapter_4">Chapter 4: College/University Education</a></li>
<li><a href="#Chapter_5">Chapter 5: Employment</a></li>
<li><a href="#Chapter_6">Chapter 6: Relationships</a></li>
<li><a href="#Chapter_7">Chapter 7: Family Gatherings</a></li>
<ol>
<li><a href="#Chapter_7.1">Chapter 7.1: Public Holidays</a></li>
<li><a href="#Chapter_7.2">Chapter 7.2: Death and mourning</a></li>
</ol>
<li><a href="#Chapter_8">Chapter 8: Retirement</a></li>
<li><a href="#Chapter_9">Chapter 9: Death</a></li>
</ol>
</div>
<div>
<h1 id="Chapter_1">Chapter 1: Early Childhood</h1>
<p>When Asian kids go through pre-schooling years and primary school, children are always put under pressure and always neglected so that they work harder and feel like they are worth something after some time and not actually useless.<br><span id="Quote">"We just never praise our children, always compare them to people who are better, so they grow up never feeling good enough and then have to constantly outdo everybody else to feel like they aren’t worthless." <br> Quoted from Stven He's father</span></p>
</div>
<div>
<h1 id="Chapter_2">Chapter 2: Primary School Education</h1>
<p>Asian kids are always compared to their peers by their parents. This is because Asian parents want the best of the child. This also means that children are used too much for the simplest of their demands. <br> <br> During this period of learning, PTSD is most used so that children are trained to cope "in the future". "In the future" meaning whenever you go back to your parents house when you are and adult. But this training will deal emotional damage, social anxiety and negliegence. This part of life is when most of the tactics are used so that the child can get used to them. Once they know how to leave the situation, create more problems for the child so that they get more experience. </p>
<p>This period of their life is when you can take advantage of them. For example, when you are shopping, tell your child that you are going to get something common in the household, like rice. Then, go to the aisle and watch them go to the cashier person and panic as you are assumed to get rice. Once they start getting constipated, go back with a 5kg bag of rice and start telling your child off for constipating in public. </p>
<div style="text-align: center;">
<h4 class="Bonus">BONUS! </h4><p class="Bonus">If you can humiliate your child in front of anyone, especially your child's friends, it will intergrate information for life. </p>
</div>
</div>
<div>
<h1 id="Chapter_3">Chapter 3: High School Education</h1>
<p>This period of life is when you get to choose his choices. </p>
</div>
<div>
<h1 id="Chapter_4">Chapter 4: College/University Education</h1>
</div>
<div>
<h1 id="Chapter_5">Chapter 5: Employment</h1>
</div>
<div>
<h1 id="Chapter_6">Chapter 6: Relationships</h1>
</div>
<div>
<h1 id="Chapter_7">Chapter 7: Family Gatherings</h1>
<h2 id="Chapter_7.1">Chapter 7.1: Public Holidays</h2>
<h2 id="Chapter_7.2">Chapter 7.2: Death and mourning</h2>
</div>
<div>
<h1 id="Chapter_8">Chapter 8: Retirement</h1>
</div>
<div>
<h1 id="Chapter_9">Chapter 9: Death</h1>
</div>
</body>
</html>所以看起来你"隐藏/显示"；按钮隐藏名为">"的整个div；内容。这意味着按钮也会消失。因此，必须使其仅隐藏<ol>元素。
您可以使用相同的代码部分，但在<ol>元素上有一个ID，如"ContentTable">，然后改为将"；内容以元素为目标；ContentTable">。当你按下"；隐藏"；按钮，它仍然会显示div，因此按钮仍然存在。允许您再次按下按钮；显示"；再次显示内容表。
像这样：
<script>
function myFunction() {
var x = document.getElementById("ContentsTable");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div id="Contents">
<h1>Contents</h1><button onclick="myFunction()">[show]</button>
<ol id="ContentsTable">
<li><a href="#Chapter_1">Chapter 1: Early Childhood</a></li>
<li><a href="#Chapter_2">Chapter 2: Primary School Education</a></li>
<li><a href="#Chapter_3">Chapter 3: High School Education</a></li>
<li><a href="#Chapter_4">Chapter 4: College/University Education</a></li>
<li><a href="#Chapter_5">Chapter 5: Employment</a></li>
<li><a href="#Chapter_6">Chapter 6: Relationships</a></li>
<li><a href="#Chapter_7">Chapter 7: Family Gatherings</a></li>
<ol>
<li><a href="#Chapter_7.1">Chapter 7.1: Public Holidays</a></li>
<li><a href="#Chapter_7.2">Chapter 7.2: Death and mourning</a></li>
</ol>
<li><a href="#Chapter_8">Chapter 8: Retirement</a></li>
<li><a href="#Chapter_9">Chapter 9: Death</a></li>
</ol>
</div>