javascript - 首次启动时故障排除按钮需要双击才能工作-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 01:28:26

24

4

我编写了这段代码，可以在您单击按钮时隐藏或显示部分文本。但是，当您首次启动该页面时，您需要单击该按钮两次才能使其正常工作。只有当您第一次尝试启动页面时才可以，因为一旦您点击了两次，您将只需要像往常一样每次点击一次。有谁知道这是为什么？

这是我的代码:

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

24

4

0

文章推荐： c - 你如何忽略 sscanf 中的已知单词？

文章推荐： javascript - 等待设备并对网页提供响应

文章推荐： c++ - 可以在字符串上使用 htonl

angular - 双击/双击 Angular2 和 ionic
我在很多论坛和问题上搜索，但似乎没有人问如何在 Angular/ionic 2 中双击或双击？在 ionic v1 中，它可以通过双击使用(参见 http://ionicframework.co
wpf - GridView 双击
我有一个 GridView，我想在其中检测列表中项目的双击事件，我按如下方式执行:
cocoa - 双击 NSCollectionView
我试图让我的程序识别 NSCollectionView 的双击。我尝试遵循本指南:http://www.springenwerk.com/2009/12/double-click-and-nscoll
WPF ListView 双击
我正在使用依赖属性来显示一个窗口，双击一个项目。不确定这是 WPF 的特定错误还是我做错了什么。如果我双击滚动条或列标题。它会触发双击命令。在 ths 链接上尝试了解决方案 WPF ListVi
ios - 双击 uitextview
我只是想让我的 uitextview 在用户双击它时可编辑。但在我的代码中它只能工作一次。隐藏键盘后双击停止像我想要的那样工作。它只显示“复制并定义”弹出窗口，如果我第二次尝试...... 也许“t
java - ListSelectionListener 双击
对于学校项目，我必须在 JList 上使用 ListSelectionListener(LSL)。我知道 LSL 会响应鼠标单击和鼠标释放。但对于该项目，我必须让它响应双击。有没有办法让 LSL 对此
java - Swing 双击
当尝试通过双击从列表中选择项目时，它会为两个列表选择一次，但在单击选择后!!! listScrollPanel.setViewportView(categoryList); subCa
c++ - 双击 QLabel
我读过这个How to distinguish between mouseReleaseEvent and mousedoubleClickEvent on QGrapnhicsScene还有这个Di
jQuery ConnectedSortable 双击
我有两个列表与 jQuery UI 中的connectedSortable 连接，但我想添加一个功能，能够双击一个项目并将其移动到另一个列表，但我真的不知道如何去做。最佳答案 $j('#list
c# - XtraScheduler 双击
我正在使用 DevExpress xtraScheduler 10.2 如何处理 xtraScheduler 中的双击事件(仅在约会而非单元格上)？我不想显示任何 appointmentedit 表
javascript - 双击 JQuery
在这方面遇到了一些麻烦。所以我的公司想要应用程序的左抽屉菜单。具体来说，菜单的控件也附加在每一行中。即每一行都有单独的订单号和附加的操作按钮。单击“操作”按钮时，抽屉会打开以执行各种操作。现在的问题是
ios - 双击 UITableView
我尝试打开一个 UIAlertView，其中有两个 textfield 以及我选择的单元格中的文本。我使用这段代码: -(void)tableView:(UITableView *)tableView
ios - MKMapView 双击
以下是我的代码；我没有被 didDoubleTapMap 解雇。 UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]
javascript - 双击\隐藏上层时防止下层双击事件
所以我有一个表单，双击一个字段会弹出一个自定义模式窗口。模态窗口上的“保存”和“取消”按钮具有调用模态窗口层上的hide() 的“单击”事件。然而，我们的一些用户自然会双击东西。双击保存或取消按钮会触
Javascript onClick 双击
我正在为 Google 地球开发此解决方案。我有一个标题，其中包含使用 CSS 创建的按钮，单击这些按钮会触发 KML 的加载。我遇到的问题是，如果用户再次单击该按钮，它会再次加载相同的 KML。我需
c# - 双击 ListView
当我双击 ListView 项目时，我收到了 DoubleTapped 事件。但我不确定如何获取执行点击的所选项目。ListView.Selecteditem 没有给我点击的项目。请帮忙。最佳答
ios - UISwitch 双击
我目前有一个 UISwitch，它在打开和关闭时分别递增和递减一个计数器。当计数器为 0 时，计数器不会递减。从功能上讲，这工作得很好，但是我注意到一个错误，想知道是否有人遇到过这个问题。本质上，
c++ - 双击，怎么处理？
我试图找出如何处理鼠标左键(或任何)双击。但是我找不到任何关于它的信息。有人能帮帮我吗？我不想编写自己的双击处理程序。 GLFW_REPEAT 不适用于鼠标按钮。最佳答案编写自己的双击处理程序有
java - LibGdx 双击
我想使用 GestureDetector 的 tap 方法检测 libgdx 中的双击。手势监听类。过去两天我在网上搜索过，但找不到如何操作的示例。我知道该方法有一个“计数”变量，但我不知道如何使用它
ios - 双击 UIButton
如何识别 UIButton 上的双击？最佳答案为控件事件UIControlEventTouchDownRepeat添加一个target-action，只有当touch的tapCount为2时才做a

首页

博学

6Ren·AI

商城

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