在其他按钮上打开不同的下拉内容

Question

我有这个看起来像这样的下拉

现在，当我点击添加设备时，一切正常，但当我点击已部署的设备时，添加设备的下拉列表会下降。

基本上，当我点击Deployed Equipments

时会发生这种情况

我做错了吗？

这是我的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

您不应在同一页面上为2个不同的元素使用相同的ID。 myDropdown似乎同时出现。

Answer 2

在这里，您可以找到使用jQuery制作的解决方案：

＆＃13;

＆＃13;

$('.dropdown').click(function() {
	$(this).find(".dropdown-content").toggleClass("show");
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
	<button 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 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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

divs都有相同的ID myDropdown。您可以删除ids的{​​{1}}，然后使用以下代码通过点击按钮的div访问下拉列表。希望这会有所帮助。

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