html - 在不同的按钮上打开不同的下拉内容

Question

我有这个下拉菜单，看起来像这样

现在，当我点击“添加设备”时，一切正常，但当我点击“部署的设备”时，“添加设备”的下拉菜单会下拉。

基本上这就是我单击已部署设备时发生的情况

我做错了什么吗？

这是我的CSS:

	/* 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);
		z-index: 1;
	}

	/* 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;}

这是我的 html:

<div class="dropdown">
	<button onclick="myFunction()" class="dropbtn">Add Equipment</button>
		<div id="myDropdown" class="dropdown-content">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
		</div>
	</div>
	
	<div class="dropdown">
	<button onclick="myFunction()" class="dropbtn">Deployed Equipments</button>
		<div id="myDropdown" class="dropdown-content">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
		</div>
	</div>

这是我的 JavaScript:

<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu 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>

Answer 1

两个 div 都有相同的 id myDropdown。您可以删除 div 的 ids 并使用以下代码通过单击按钮的 nextElementSibling 访问下拉列表。希望这会有所帮助。

function myFunction() {
    //Remove class 'show' for dropdown except the current one
    [].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
         if (this.event.target.nextElementSibling !== el)
            el.classList.remove("show");
    });

    //this.event.target refers to the button clicked. Get nextelement and toggle class 'show'
    this.event.target.nextElementSibling.classList.toggle("show");
}

示例:

function myFunction() {
	[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
		if (this.event.target.nextElementSibling !== el)
			el.classList.remove("show");
	});

	this.event.target.nextElementSibling.classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
	if (!event.target.matches('.dropbtn')) {
		[].slice.call(document.getElementsByClassName("dropdown-content")).map(function(el){
				el.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);
	z-index: 1;
}
/* 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;
}

<div class="dropdown">
	<button onclick="myFunction()" class="dropbtn">Add Equipment</button>
	<div class="dropdown-content">
		<a href="#">Link 1</a>
		<a href="#">Link 2</a>
		<a href="#">Link 3</a>
	</div>
</div>

<div class="dropdown">
	<button onclick="myFunction()" class="dropbtn">Deployed Equipments</button>
	<div class="dropdown-content">
		<a href="#">Link 1</a>
		<a href="#">Link 2</a>
		<a href="#">Link 3</a>
	</div>
</div>