Javascript - 单击空格时左侧下拉菜单不会消失，但尽管代码相同，但右侧下拉菜单会消失。使困惑-6ren

Javascript - 单击空格时左侧下拉菜单不会消失，但尽管代码相同，但右侧下拉菜单会消失。使困惑

转载作者：行者123 更新时间：2023-11-30 14:17:10

当我点击选择条件框时，会出现一个下拉菜单。当我单击空白区域或数据表按钮时，下拉菜单消失 = 好。当我对“选择数据表”执行相同操作时，下拉菜单不会消失，除非我再次单击该按钮，我做错了什么？我想知道是不是因为我有相同的代码...如果我删除右侧窗口的 JS，该 JS 允许窗口在单击空白处消失，则相反的情况发生(左侧框的菜单消失但不是右侧)。完整代码如下:

/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
	document.getElementById("myDatalist").classList.toggle("show")
}

window.onclick = function(event) {
  if (!event.target.matches('.dropdata')) {
    var dropdowns = document.getElementsByClassName("datalist-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function criFunction() {
	document.getElementById("myCriteria").classList.toggle("show")
}

window.onclick = function(event) {
  if (!event.target.matches('.dropcriteria')) {
    var dropdowns = document.getElementsByClassName("criterialist-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/*START Title*/

h1 { 
color: #46b3d1;
font-family: Gotham;
font-weight: 80;
 }

 /*END title*/

 /*START Database drop down*/
.dropdata {
	font-family: Gotham;
    color: white;
    padding: 16px;
    font-size: 16px;
    width:200px;
    border: none;
    cursor: pointer;
    background-color: #46b3d1;
}


.dropdata:hover, .dropdata:focus {
    background-color: #22819b
}



.datalist {
    position: relative;
    display: inline-block;
    font-family: gotham;
}


.datalist-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width:200px;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.datalist-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.datalist a:hover {background-color: #ddd;}
 /*END Database drop down*/


/*START Criteria box */

.dropcriteria {
	font-family: Gotham;
    color: white;
    padding: 16px;
    font-size: 16px;
    width:200px;
    border: none;
    cursor: pointer;
    background-color: #46b3d1;
}


.dropcriteria:hover, .dropcriteria:focus {
    background-color: #22819b
}


.criterialist {
    position: relative;
    display: inline-block;
    font-family: gotham;
}


.criterialist-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    width:200px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.criterialist-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.criterialist a:hover {background-color: #ddd;}

.show {display: block;}


/*END Criteria box */

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Project Eric</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1>Project Eric</h1>

<div class="datalist">
	<button onclick="myFunction()" class="dropdata">Choose data table</button>
	<div id="myDatalist" class="datalist-content">
		<a href="oxford_ann">Oxford Annual</a>
		<a href="eng_counties">English Counties</a>
		<a href="oxford_qu">Oxford Quarterly</a>
	</div>
</div>

<div class="criterialist">
	<button onclick="criFunction()" class="dropcriteria">Choose criteria</button>
	<div id="myCriteria" class="criterialist-content">
		<a href="index">Index</a>
		<a href="database">Database</a>
		<a href="filter">Filter</a>
	</div>
</div>

最佳答案

问题是点击发生时只有第一个window.onclick函数被触发。

将逻辑组合到一个方法中，它将按预期工作。

/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
	document.getElementById("myDatalist").classList.toggle("show")
}

window.onclick = function(event) {
  if (!event.target.matches('.dropcriteria')) {
    var dropdowns = document.getElementsByClassName("criterialist-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
  
  if (!event.target.matches('.dropdata')) {
    var dropdowns = document.getElementsByClassName("datalist-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function criFunction() {
	document.getElementById("myCriteria").classList.toggle("show")
}

/*START Title*/

h1 { 
color: #46b3d1;
font-family: Gotham;
font-weight: 80;
 }

 /*END title*/

 /*START Database drop down*/
.dropdata {
	font-family: Gotham;
    color: white;
    padding: 16px;
    font-size: 16px;
    width:200px;
    border: none;
    cursor: pointer;
    background-color: #46b3d1;
}


.dropdata:hover, .dropdata:focus {
    background-color: #22819b
}



.datalist {
    position: relative;
    display: inline-block;
    font-family: gotham;
}


.datalist-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width:200px;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.datalist-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.datalist a:hover {background-color: #ddd;}
 /*END Database drop down*/


/*START Criteria box */

.dropcriteria {
	font-family: Gotham;
    color: white;
    padding: 16px;
    font-size: 16px;
    width:200px;
    border: none;
    cursor: pointer;
    background-color: #46b3d1;
}


.dropcriteria:hover, .dropcriteria:focus {
    background-color: #22819b
}


.criterialist {
    position: relative;
    display: inline-block;
    font-family: gotham;
}


.criterialist-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    width:200px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.criterialist-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.criterialist a:hover {background-color: #ddd;}

.show {display: block;}


/*END Criteria box */

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Project Eric</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1>Project Eric</h1>

<div class="datalist">
	<button onclick="myFunction()" class="dropdata">Choose data table</button>
	<div id="myDatalist" class="datalist-content">
		<a href="oxford_ann">Oxford Annual</a>
		<a href="eng_counties">English Counties</a>
		<a href="oxford_qu">Oxford Quarterly</a>
	</div>
</div>

<div class="criterialist">
	<button onclick="criFunction()" class="dropcriteria">Choose criteria</button>
	<div id="myCriteria" class="criterialist-content">
		<a href="index">Index</a>
		<a href="database">Database</a>
		<a href="filter">Filter</a>
	</div>
</div>

关于Javascript - 单击空格时左侧下拉菜单不会消失，但尽管代码相同，但右侧下拉菜单会消失。使困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53397424/

文章推荐： javascript - 使用基于路由器参数的 Vue http 获取数据

文章推荐： javascript - Vue.js 在 for 循环中关闭表单标签

文章推荐： javascript - 如何使用 Node.js 和 Mongoose 添加对象数组？

javascript - 为什么我的新内容没有立即在页面上显示/消失，而是在手动刷新后显示/消失？
我使用 vanilla JS 通过 AJAX 向数据库发送请求。数据写入数据库没有问题。在刷新页面之前，我看不到被放入数据库中的内容。当我删除内容时也会发生同样的情况，我必须刷新才能看到内容消失了。
Elixir Phoenix LiveView Echart 消失(消失)
抱歉，这篇文章很长，我试图提供所有信息并解释我已经尝试过的内容。问题: 我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好，但 echart 一完成绘制就消失了。好像
javascript - 单击按钮时选择框出现/消失
搜索了一下，没有找到我要找的东西。我有两个按钮，单击一次即可拉出两个不同的选择框，第二次单击它们就会消失。但是，我希望选择框 1 在单击按钮 2 时消失，反之亦然:选择框 2 将在单击按钮 1 时消失
ios - UILayoutViewController中的滚动时自动布局约束“消失”
我正在尝试使用自动布局使用“浮动”标题构建滚动视图。更确切地说，我正在尝试建立包含几列的日历视图。这些列中的每个列都应具有自己的标题，该标题应浮动在顶部，而该列可以垂直滚动到其下方。如果一切正常，则
jquery - 让具有类别的对象在循环中随机出现/消失
我正在尝试模仿星星背景。星星是在加载时创建并随机散布在整个网站上的。到目前为止我已经调整了一些代码。 var star="•"; var numStars=100; for(var x=1;x•";
jQuery:单击时菜单出现/消失
我查遍了整个网络，但找不到解决方案。我对 jQuery 也很陌生。我的案例: 我有一个导航栏，其中的每个链接都会激活/触发一个megamenu(每个链接都有自己的megamenu)。我需要什么:
android - OnChildClickListener 消失
我有一个可扩展的 ListView ，当我点击一行时，它会触发 onChildClick 或 onGroupClick，具体取决于我点击的是子项还是组。如果我在 xml 布局文件中添加可点击的内容(
ios - NSMutableData 消失
在我的程序中，我有一个 NSMutableData 变量，用于收集来自 http://www.nhara.org/scored_races-2013.htm 的信息。 .大约第三次从网站获取信息后，当
android - Genymotion 消失
我一直在完美地使用 Genymotion，但是从最近几天开始我的 Genymotion 并打开它的 GPS 开始，我的 Genymotion 突然消失了。但是我的 eclipse 显示 Genymot
添加文档类型时 CSS 消失
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
css - 添加到购物车按钮在悬停时立即出现/消失
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
c++ - vector 消失
所以我的 Item::return_all() 有问题，因为我在 main.cpp 中调用它。早些时候我在 read_file() 和 for (auto data : example_item) 中
ios - UITableViewCells 消失
所有 UITableCells 在 UITableView 中滚动和触摸时消失。一切都以编程方式完成，我使用标准的 UITableViewCell 类。我在某处读到包含我的单元格数据的数组可能被清空
ios - UICollectionView 消失
我对 Swift 还很陌生。我的问题是我的 UICollectionView 正在消失。在 Xcode 中，它显示一切就绪，但当我在模拟器或设备上启动时，它消失了，只剩下导航栏和标签栏。有谁知道是什
javascript - 根据单选按钮的状态变化使子内容出现/消失
这是 this one的续题。较早的问题是在复选框上。但是后来我根据要求把check box改成了radio buttons。现在我需要显示子单选按钮并在母单选按钮处于事件状态时更改背景颜色。一旦它
javascript - Canvas 消失
我用 JS 写了一个简单的脚本。当我将它放入 html 文档(在 body 标签的底部)时，它工作正常。当我尝试将它放入外部文档并链接它时，脚本运行但 canvas 元素消失(刚刚检查:当我将脚本放在
jquery - 滚动页面时使元素出现/消失
我正在尝试创建一个带有固定元素的滚动页面，当用户向下滚动页面时，该元素“始终”可见。例如，带有道路背景的汽车图像。因此，当用户向下滚动页面时，汽车看起来就像在路上行驶。虽然汽车出现在道路的顶部，但它必
javascript - 使文本在单击按钮时出现/消失
这个问题在这里已经有了答案: How can I change CSS display none or block property using jQuery? (15 个答案) 关闭 4 年前。
android - 如何避免旧的小部件在主要代码返工期间失败/消失？
我在市场上有一个支持小部件的应用程序。我对应用程序进行了一些重大更改，重新设计了很多内部结构，替换/重命名 Activity 等。其他更改包括从不同的共享首选项键获取小部件配置数据，尽管我已经编写了转
java - fragment 消失
我有一个 fragment alertsfragment.java，它有一个 GridView 布局，当我打开它时，它工作正常，但是当我在其他选项卡之间滑动时，它就消失了。为了解释更多，我有一个 Ac

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript - 单击空格时左侧下拉菜单不会消失，但尽管代码相同，但右侧下拉菜单会消失。使困惑