我正在使用我在网络上找到的代码创建下拉列表。
问题是，当我点击一个打开的菜单时，我点击下一个菜单，第一个菜单仍然打开...
我设法在下拉，链接，尺寸和颜色方面做了很多工作......
...但是当我点击另一个下拉菜单时，它不会关闭。
任何和所有帮助将不胜感激！
function myFunction() {
document.getElementById("myDropdown1").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown1-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionFluids() {
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown2-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionAdditives() {
document.getElementById("myDropdown3").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown3-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionCleaners() {
document.getElementById("myDropdown4").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown4-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionWinter() {
document.getElementById("myDropdown5").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown5-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionLubricants() {
document.getElementById("myDropdown6").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown6-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionOther() {
document.getElementById("myDropdown7").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown7-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionNone() {
document.getElementById("myDropdown7").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown6-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.dropbtn1 {
background-color: transparent;
color: white;
padding: 7px 10px 7px 10px;
font-size: 13px;
font-weight: bold;
font-family: "Arial Narrow", Arial, sans-serif;
border: none;
cursor: pointer;
}
.dropbtn1:hover,
.dropbtn1:focus {
background-color: #383838;
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #eff0f2;
font-size: 13px;
font-weight: bold;
line-height: 2.2;
width: 200px;
padding: 23px 10px 10px 10px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: -501;
border-bottom: 3px solid red;
}
.dropdown1-content a {
color: black;
text-align: left;
font-size: 12px;
padding: 6px 6px 6px 6px;
text-decoration: none;
}
.dropdown1-content a:hover {
background-color: #ddd
}
.show {
display: block;
}<div style="background-color:black">
<div class="dropdown1">
<button onclick="myFunction()" class="dropbtn1">REFRIGERANTS</button>
<div id="myDropdown1" class="dropdown1-content" style="text-align:left;">
<a href="#">Refrigerants</a><br>
<a href="#">Lubricants</a><br>
<a href="#">Treatments</a><br>
<a href="#">R-134A Products</a><br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionFluids()" class="dropbtn1">FLUIDS</button>
<div id="myDropdown2" class="dropdown1-content" style="text-align:left">
<a href="#">Brake Fluid</a><br>
<a href="#">Automatic Transmission Fluid</a><br>
<a href="#">Power Steering Fluid</a><br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionAdditives()" class="dropbtn1">ADDITIVES</button>
<div id="myDropdown3" class="dropdown1-content" style="text-align:left">
<a href="#">Fuel Additives</a><br>
<a href="#">Oil Additives</a>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionCleaners()" class="dropbtn1">CLEANERS</button>
<div id="myDropdown4" class="dropdown1-content" style="text-align:left">
<a href="#">Brake Parts Cleaner</a><br>
<a href="#">Carb & Air Intake Cleaners</a><br>
<a href="#">General Cleaners</a><br>
<a href="#">Battery Cleaners</a><br>
</div>
</div>
</font>
</td>
<td></td>
<td align="left" width="38%">
<font color="#ffffff">
<div class="dropdown1">
<button onclick="FunctionWinter()" class="dropbtn1">WINTER DRIVING</button>
<div id="myDropdown5" class="dropdown1-content" text-align="left">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a><br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionLubricants()" class="dropbtn1">LUBIRICANTS</button>
<div id="myDropdown6" class="dropdown1-content" text-align="left">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a><br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionOther()" class="dropbtn1">OTHER PRODUCTS</button>
<div id="myDropdown7" class="dropdown1-content" text-align="left">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a><br>
</div>
</div>
</div>
答案 0 :(得分：1)
这是一种不需要id的技术，并且不需要4个函数来完成同样的事情。它使用类来分配处理程序，并根据单击的按钮查找元素。
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:appcompat-v7:27.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}
fileTree(dir: 'libs', include: '*.aar')
.each { File file ->
dependencies.add("compile", files( 'libs/'+file.name ))
}
// set up the event handlers
var buttons = document.querySelectorAll("button.dropbtn");
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener("click", showDiv);
}
// set up the mouseout handlers
var contentDivs = document.querySelectorAll(".dropdown-content");
for (var i=0; i < contentDivs.length; i++) {
contentDivs[i].addEventListener("mouseleave", hideDiv);
}
function showDiv(e) {
// remove "show" class from previously shown menu, if it exists.
var prev = document.querySelector(".dropdown-content.show");
if (prev) prev.classList.remove("show");
// add "show" class to new clicked menu, unless the clicked menu was already open in which case close it
var dropdownContent = this.parentNode.querySelector(".dropdown-content");
if (dropdownContent == prev) return;
dropdownContent.classList.add("show");
}
function hideDiv() {
this.classList.remove("show");
}.dropbtn{
background-color: transparent;
color: white;
padding: 7px 10px 7px 10px;
font-size: 13px;
font-weight:bold;
font-family: "Arial Narrow", Arial, sans-serif;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus{background-color: #383838;}
.dropdown{position: relative;display: inline-block;}
.dropdown-content{
display: none;
position: absolute;
background-color: #eff0f2;
font-size: 13px;
font-weight:bold;
line-height:2.2;
width: 200px;
padding: 23px 10px 10px 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: -501;
border-bottom: 3px solid red;
}
.dropdown-content a{
color: black;
text-align: left;
font-size: 12px;
padding: 6px 6px 6px 6px;
text-decoration: none;
}
.dropdown-content a:hover{background-color: #ddd}
.show {display:block;}
答案 1 :(得分：0)
您不需要为每个下拉列表单独编写函数...
...使用event.target查找点击的元素并将show类切换为...
...删除以前添加的show类用于循环以查找该元素并删除该类
注意 ：我正在将show类添加到.dropbtn1，然后使用css adjacent selector(+)来{ {1}}到下一个display:block
Stack Snippet
.dropdown1-contentwindow.onclick = function(event) {
if (event.target.matches('.dropbtn1')) {
var dropbuttons = document.getElementsByClassName("dropbtn1");
for (var i = 0; i < dropbuttons.length; i++) {
var openDropdown = dropbuttons[i];
if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
event.target.classList.toggle("show");
}
}.dropbtn1 {
background-color: transparent;
color: white;
padding: 7px 10px 7px 10px;
font-size: 13px;
font-weight: bold;
font-family: "Arial Narrow", Arial, sans-serif;
border: none;
cursor: pointer;
}
.dropbtn1:hover,
.dropbtn1:focus {
background-color: #383838;
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #eff0f2;
font-size: 13px;
font-weight: bold;
line-height: 2.2;
width: 200px;
padding: 23px 10px 10px 10px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: -501;
border-bottom: 3px solid red;
}
.dropdown1-content a {
color: black;
text-align: left;
font-size: 12px;
padding: 6px 6px 6px 6px;
text-decoration: none;
}
.dropdown1-content a:hover {
background-color: #ddd
}
.show+.dropdown1-content {
display: block;
}