嘿，我希望有人过来帮我解决问题或给我一些指示。这是一个奇怪的情况，我正在寻找可以让我在单击后打开 div 然后消失的 javascript 代码如果我点击任何地方。
这是来自 w3schools 的代码。
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
现在我的意图是使用 js 脚本并将其应用于两个具有相同功能的不同按钮。
您可以在此处查看此示例。 http://jz.xqlsv.com/特别是与杰西卡见面按钮以及治疗和服务。
现在 meet jessica 按钮工作得很好，因为当我点击任何地方时，治疗和服务不会关闭。但是你会注意到按钮上的 css 确实发生了变化，但 div 并没有像 meet jessica 按钮一样消失。
我什至尝试使用来自 w3schools 的精确副本将此脚本实现到 jsfiddle。但它似乎根本不起作用。
https://jsfiddle.net/tsatsurg/wz8tk8rq/9/
如果有人能帮忙解决这个问题，我将不胜感激。 如果有帮助，该网站目前正在 Wordpress 中开发。
请看一下，在此先感谢您。
最佳答案
按照你的 fiddle ，对于几个按钮，片段(JS/CSS/HTML):
window.onclick = function(event) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var match = false, dropdown = dropdowns[i];
if (event.target.classList.contains('dropbtn')) {
for (var c of dropdown.classList.values()) {
if (c.indexOf('menu-') == 0 && event.target.classList.contains(c)) {
match = true; break;
}
}
}
if (match) {dropdown.classList.add('show');
} else {dropdown.classList.remove('show');}
}
};/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/* Define menu positions */
.dropdown-content.menu-one {left: 0;}
.dropdown-content.menu-two {left: 144px;}<div class="dropdown">
<button class="dropbtn menu-one">Dropdown One</button>
<div id="myDropdown1" class="dropdown-content menu-one">
<a href="#">Link One 1</a>
<a href="#">Link One 2</a>
<a href="#">Link One 3</a>
</div>
<button class="dropbtn menu-two">Dropdown Two</button>
<div id="myDropdown2" class="dropdown-content menu-two">
<a href="#">Link Two 1</a>
<a href="#">Link Two 2</a>
<a href="#">Link Two 3</a>
</div>
</div>关于来自 w3schools 的 Javascript 可点击下拉菜单不适用于 jsfiddle。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40821275/