Question

嘿，我希望有人来这里，能够帮助我或给我一些指示..这是一个奇怪的情况，我正在寻找允许我打开一个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/特别是满足jessica按钮和治疗和服务。

现在，当我点击任何地方时，遇见jessica按钮完美地作为治疗和服务不会关闭..但你会注意到css确实改变了按钮但是div不会因为遇见jessica按钮而消失。

我甚至尝试使用w3schools的完全复制品将此脚本实现到jsfiddle。但它似乎根本不起作用。

https://jsfiddle.net/tsatsurg/wz8tk8rq/9/

如果有人可以帮忙解决这个问题我会非常感激。该网站目前正在Wordpress中开发，如果这有用的话。

请看一下，并提前致谢。

Answer 1

关注你的小提琴，几个按钮，片段（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>

Answer 2

你有几个问题：

通过向按钮和窗口添加单击事件处理程序，任何单击按钮的操作也会因event bubbling而触发窗口上的单击。因此，一个事件将显示列表，而下一个事件将隐藏它。要解决此问题，我们需要在按钮点击时取消该事件，并prevent it from bubbling upward到窗口。
接下来，您使用的是JQuery，但在您的小提琴中，您尚未将其配置为使用该库。
您使用的是JQuery的toggle()方法，而不是toggleClass()。
W3学校不是提供现代，准确信息的最佳资源。 MDN更好。

看看this modified Fiddle that works。

来自w3schools的javascript可点击下拉菜单与jsfiddle无法合作。为什么呢？

2 个答案: