首次启动时，需要双击故障排除按钮才能工作

时间：2017-11-29 21:52:59

标签： javascript jquery html css

我已经制作了这个代码，当您单击按钮时，该代码会隐藏或显示部分文本。但是，当您首次启动页面时，您需要在按钮上单击两次才能使其生效。只有当您第一次尝试启动页面时才会这样，因为一旦您点击两次，您每次只需要像往常一样点击一次。有没有人知道为什么会这样？

这是我的代码：

#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>

4 个答案:

答案 0 :(得分：1)

我交换了if语句以解决问题

＆＃13;
＆＃13; 
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";
    }
}
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

看起来第一次点击时，myDiv样式的if条件失败。我为标记添加了一个显式的样式属性，现在它运行得很好。

对于第一个按钮，两个控制台都按预期记录。对于第二个，if条件不会执行。

注意：我只在其中一个div中添加了style属性以澄清差异。

enter code here

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Slides Checkbox</title>
        <link rel="stylesheet" href="sample.css">
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

        <script>    
            function myFunction() {
                var x = document.getElementById("myDIV");
                console.log("1", x.style.display);
                if (x.style.display === "none") {
                    console.log("2");
                    x.style.display = "block";
                } 
                else {
                    x.style.display = "none";
                }
            };
            function myFunction2() {
                var x = document.getElementById("myDIV2");
                console.log("3", x.style.display);
                if (x.style.display === "none") {
                    console.log("4");
                    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" style="display: none;">
                    <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>

答案 2 :(得分：0)

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Slides Checkbox</title>
</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">
    
        <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>
</body>
＆＃13;
＆＃13;
＆＃13;

嗯，你的代码似乎做你想要的。该片段被复制并粘贴，我将您的脚本移动到底部并删除了您的jQuery链接。可能是你的CSS文件会影响你网页的初始样式，而你的JS在首次点击后会接管吗？

答案 3 :(得分：0)

HTMLElement.style属性用于获取和设置元素的内联样式。

当你打电话给这个街区时：

var x = document.getElementById("myDIV");
if (x.style.display === "none") {
    x.style.display = "block";
} 
    else {
   x.style.display = "none";
}

您正在检查内联显示样式。您第一次点击其他块并将display: none添加到内联元素。

要在首次加载时使其正常工作，请尝试使用以下命令：

if (window.getComputedStyle(x).getPropertyValue("display") == "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }

您只需点击一次即可查看所做的更改。

相关问题
最新问题