我尝试允许用户在.dropdown-content内点击，菜单仍然保持打开状态。但是，我还需要让.dropbtn可以点击，否则他们无法打开菜单。
我最初尝试在以下代码中使用||：!e.target.matches('.dropbtn') || !e.target.matches('.dropdown-content')。
在评论中讨论后，我被告知我应该使用&&。我更新了该部分代码，但仍然遇到了使代码正常工作的一些问题。该片段已在下面更新。
下面你可以看到我认为应该关注的领域。我正在收集所有需要在活动和非活动状态之间切换的部分。然后尝试验证以下内容：
.dropdown-content或其任何子女中时，不应该关闭。.dropdown-content（不包括驻留在其中的DIV，也就是孩子）之外，菜单应该关闭。问题区域：
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
// Close the dropdown(s) if the user clicks outside of it
window.onclick = function (e) {
if (!e.target.matches('.dropbtn') && !e.target.matches('.dropdown-content')) {
ourCompany.classList.remove('active-drop');
services.classList.remove('active-drop');
products.classList.remove('active-drop');
resources.classList.remove('active-drop');
goTo.classList.remove('active-drop');
}
}
代码：
/* Navigation Scroll */
var startPos = -1;
window.onscroll = function() {
var bar = document.getElementById('pm-nav');
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
if (startPos < 0) startPos = findPosY(bar);
if (pageYOffset > startPos) {
bar.style.position = 'fixed';
bar.style.top = 0;
ourCompany.classList.add("dropdown-content-scroll");
services.classList.add("dropdown-content-scroll");
products.classList.add("dropdown-content-scroll");
resources.classList.add("dropdown-content-scroll");
goTo.classList.add("dropdown-content-scroll");
} else {
bar.style.position = 'relative';
ourCompany.classList.remove('dropdown-content-scroll');
services.classList.remove('dropdown-content-scroll');
products.classList.remove('dropdown-content-scroll');
resources.classList.remove('dropdown-content-scroll');
goTo.classList.remove('dropdown-content-scroll');
}
};
function findPosY(obj) {
var curtop = 0;
if (typeof(obj.offsetParent) != 'undefined' && obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
curtop += obj.offsetTop;
} else if (obj.y)
curtop += obj.y;
return curtop;
}
/* When the user clicks on the button, toggle between hiding and showing the dropdown(s) content */
function toggleDrop(drop) {
var i = 0;
while (i < 5) {
document.getElementById(document.getElementsByClassName('dropdown-content')[i].id).classList.remove('active-drop');
i++;
}
switch (drop) {
case "our-company":
document.getElementById("our-company").classList.add("active-drop");
break;
case "services":
document.getElementById("services").classList.add("active-drop");
break;
case "products":
document.getElementById("products").classList.add("active-drop");
break;
case "resources":
document.getElementById("resources").classList.add("active-drop");
break;
case "go-to":
document.getElementById("go-to").classList.add("active-drop");
break;
default:
//make this unknown...
}
}
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
// Close the dropdown(s) if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn') && !e.target.matches('.dropdown-content')) {
ourCompany.classList.remove('active-drop');
services.classList.remove('active-drop');
products.classList.remove('active-drop');
resources.classList.remove('active-drop');
goTo.classList.remove('active-drop');
}
}<link href="https://www.paymaster.com/net4/css/pm-main.css" rel="stylesheet" />
<!-- Website Header -->
<header class="pm-mainHeader">
<div class="maxWidth-1440">This is a Header</div>
</header>
<!-- Website header :END -->
<!-- Website Navigation -->
<div id="pm-nav" class="pm-mainNav">
<div class="maxWidth-1440">
<div class="pm-row pm-box-sizing">
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('our-company');return false;" class="dropbtn">Our Company</button>
<div id="our-company" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="mFooter redBg">
<h2>Menu our-company</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('services');return false;" class="dropbtn">Services</button>
<div id="services" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 4</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 5</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 6</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="mFooter blueBg">
<h2>Menu services</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('products');return false;" class="dropbtn">Products</button>
<div id="products" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="mFooter greenBg">
<h2>Menu products</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('resources');return false;" class="dropbtn">Resources</button>
<div id="resources" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="mFooter orangeBg">
<h2>Menu resources</h2>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('go-to');return false;" class="dropbtn">Go To</button>
<div id="go-to" class="dropdown-content">
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="mFooter purpleBg">
<div class="closeBtnContainer">
<span class="closeBtn"><i class="material-icons">arrow_drop_up</i><i class="material-icons">menu</i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Website Navigation :END -->
<!-- Main Content -->
<div style="padding: 300px;">Test</div>
<!-- Main Content :END -->
<!-- Main Footer -->
<footer class="pm-mainFooter">
<div class="maxWidth-1440">This is a Footer</div>
</footer>
<!-- Main Footer :END -->
答案 0 :(得分：0)
在这个问题开始时有很多仇恨，但我很感谢那些坚持并帮助过的人。不同输入的组合使我找出问题所在，非常简单，将*添加到.dropdown-content的末尾。添加*会告诉代码查看.dropdown-content及其所有子项。
其中一个原始问题是由@Carcigenicate解决的，他们告诉我我使用||代替&&将这些信息与上面的数据结合起来引导我找到我想要的答案，但是我的代码仍然没有效率。因此，@ rockstar指出了我可以做的一些关键事项来帮助改进我的代码并负责答案的一半。再次感谢man！
谢谢大家的帮助，这里不再赘述......
<强>解答：
var elems = [
document.getElementById("our-company"),
document.getElementById("services"),
document.getElementById("products"),
document.getElementById("resources"),
document.getElementById("go-to")
];
window.onclick = function (e) {
if (!e.target.matches('.dropbtn') && !e.target.matches('.dropdown-content *')) {
elems.forEach(function (el) {
el.classList.remove("active-drop");
})
}
}