我编写了这段代码，可以在您单击按钮时隐藏或显示部分文本。但是，当您首次启动该页面时，您需要单击该按钮两次才能使其正常工作。只有当您第一次尝试启动页面时才可以，因为一旦您点击了两次，您将只需要像往常一样每次点击一次。有谁知道这是为什么？
这是我的代码:
#myDIV {
width: 200px;
background-color:#333;
color:#fff;
display:none;
padding:0;
margin:0;
}
#myDIV2 {
width: 200px;
background-color:#333;
color:#fff;
display:none;
}
#arrow{
height:10px;
width:10px;
}
#ok{
height:20px;
width:20px;
}
#button{
background-color:#333;
color:#fff;
width:250px;
empty-cells:hide;
}
table,tr,td{
border:2px solid black;
border-collapse:collapse;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Slides Checkbox</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
};
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
};
</script>
</head>
<body>
<table id="button">
<tr>
<td><button onclick="myFunction()"><img src="img/arrow.png" id="arrow"></button>
Première liste:</td>
</tr>
<tr>
<td><div id="myDIV">
<ul>
<li>1er item</li>
<li>2eme item</li>
<li>3eme item</li>
</ul>
</div></td>
</tr>
<tr>
<td><button onclick="myFunction2()"><img src="img/arrow.png" id="arrow"></button>
Deuxième liste:</td>
</tr>
<tr>
<td><div id="myDIV2">
<ul>
<li>1er item</li>
<li>2eme item</li>
<li>3eme item</li>
</ul>
</div></td>
</tr>
</table>
<img src="img/ok.png" id="ok">
</body>
</html>最佳答案
我交换了 if 语句来解决这个问题
function myFunction(e) {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}#myDIV {
width: 200px;
background-color:#333;
color:#fff;
padding:0;
margin:0;
display: none;
}
#myDIV2 {
width: 200px;
background-color:#333;
color:#fff;
display: none;
}
#arrow{
height:10px;
width:10px;
}
#ok{
height:20px;
width:20px;
}
#button{
background-color:#333;
color:#fff;
width:250px;
empty-cells:hide;
}
table,tr,td{
border:2px solid black;
border-collapse:collapse;
}<table id="button">
<tr>
<td><button onclick="myFunction()"><img src="img/arrow.png" id="arrow"></button>Première liste:</td>
</tr>
<tr>
<td>
<div id="myDIV">
<ul>
<li>1er item</li>
<li>2eme item</li>
<li>3eme item</li>
</ul>
</div>
</td>
</tr>
<tr>
<td><button onclick="myFunction2()"><img src="img/arrow.png" id="arrow"></button>Deuxième liste:</td>
</tr>
<tr>
<td>
<div id="myDIV2">
<ul>
<li>1er item</li>
<li>2eme item</li>
<li>3eme item</li>
</ul>
</div>
</td>
</tr>
</table>关于javascript - 首次启动时故障排除按钮需要双击才能工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47562476/