选择其他人时如何隐藏其他下拉菜单
How to hide the other dropdown when others is selected
我有一个带有 2 个选项的菜单栏,单击时会显示下拉菜单,从技术上讲,即使您只单击一个选项,它们也会全部显示。我只想在单击其他菜单项后隐藏其他下拉菜单。
我的代码有什么问题?
正文:
<body>
<ul>
<li class="File">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">File</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Open</a>
<a href="#">Save</a>
<a href="#">Save As</a>
<a href="#">Close</a>
</div>
<li class="Edit">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Edit</a>
<div class="dropdown-content" id="myDropdown2">
<a href="#">Undo</a>
<a href="#">Redo</a>
<a href="#">Cut</a>
<a href="#">Copy</a>
<a href="#">Paste</a>
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
font-family: verdana;
font-size: 14px;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<script src="jquery.js"></script>
</style>
你需要这样的东西
您的代码的问题是它切换了两个下拉菜单。因此,当它们都没有显示时,它们会得到这个 class.
你可以这样做:
<body>
<ul>
<li class="File">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction(myDropdown)">File</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Open</a>
<a href="#">Save</a>
<a href="#">Save As</a>
<a href="#">Close</a>
</div>
</li>
<li class="Edit">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction(myDropdown2)">Edit</a>
<div class="dropdown-content" id="myDropdown2">
<a href="#">Undo</a>
<a href="#">Redo</a>
<a href="#">Cut</a>
<a href="#">Copy</a>
<a href="#">Paste</a>
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function hideDropdowns(excludeId) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show') && excludeId !== openDropdown.id) {
openDropdown.classList.remove('show');
}
}
}
function myFunction(id) {
id.classList.toggle("show");
hideDropdowns(id.id);
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideDropdowns();
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
据我所知,我认为您不需要通过所有这些代码来完成您正在寻找的事情。只需使用 .hide
class 在页面加载时默认隐藏下拉菜单,然后使用带有 call(this) 和 nextElementSibling 的按钮 onclick 切换它们。
这是代码。
<style>
.hide{
display:none;
}
</style>
<body>
<ul>
<li class="File">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction.call(this)">File</a>
<div class="dropdown-content hide" id="myDropdown">
<a href="#">Open</a>
<a href="#">Save</a>
<a href="#">Save As</a>
<a href="#">Close</a>
</div>
</li>
<li class="Edit">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction.call(this)">Edit</a>
<div class="dropdown-content hide" id="myDropdown2">
<a href="#">Undo</a>
<a href="#">Redo</a>
<a href="#">Cut</a>
<a href="#">Copy</a>
<a href="#">Paste</a>
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<script>
var drptochoose;
function myFunction() {
var isAlreadyOpen = false;
if(!this.nextElementSibling.classList.contains('hide'))
{
// if the clicked button dropdown is already open then use this bool to not show it again.
isAlreadyOpen = true;
}
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (!openDropdown.classList.contains('hide')) {
openDropdown.classList.toggle("hide");
}
}
if(!isAlreadyOpen)
{
// if the dropdown was hidden when clicked then show it
this.nextElementSibling.classList.toggle("hide");
}
}
</script>
</body>
希望对您有所帮助。
window.onclick = function(e) {
if (e.target.matches('.dropbtn')) {
var allDropDown = document.querySelectorAll('.dropdown-content');
//This will hide all the dropdown for everytime you click
[].forEach.call(allDropdown, function(dropdown){
dropdown.classList.add('hide');
});
//This will show the subdrop down of that menu
var dropdown = e.target.parent.querySelector(".dropdown-content");
dropdown.classList.add('show');
}
}
}
我有一个带有 2 个选项的菜单栏,单击时会显示下拉菜单,从技术上讲,即使您只单击一个选项,它们也会全部显示。我只想在单击其他菜单项后隐藏其他下拉菜单。
我的代码有什么问题?
正文:
<body>
<ul>
<li class="File">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">File</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Open</a>
<a href="#">Save</a>
<a href="#">Save As</a>
<a href="#">Close</a>
</div>
<li class="Edit">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Edit</a>
<div class="dropdown-content" id="myDropdown2">
<a href="#">Undo</a>
<a href="#">Redo</a>
<a href="#">Cut</a>
<a href="#">Copy</a>
<a href="#">Paste</a>
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
font-family: verdana;
font-size: 14px;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<script src="jquery.js"></script>
</style>
你需要这样的东西
您的代码的问题是它切换了两个下拉菜单。因此,当它们都没有显示时,它们会得到这个 class.
你可以这样做:
<body>
<ul>
<li class="File">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction(myDropdown)">File</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Open</a>
<a href="#">Save</a>
<a href="#">Save As</a>
<a href="#">Close</a>
</div>
</li>
<li class="Edit">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction(myDropdown2)">Edit</a>
<div class="dropdown-content" id="myDropdown2">
<a href="#">Undo</a>
<a href="#">Redo</a>
<a href="#">Cut</a>
<a href="#">Copy</a>
<a href="#">Paste</a>
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function hideDropdowns(excludeId) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show') && excludeId !== openDropdown.id) {
openDropdown.classList.remove('show');
}
}
}
function myFunction(id) {
id.classList.toggle("show");
hideDropdowns(id.id);
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideDropdowns();
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
据我所知,我认为您不需要通过所有这些代码来完成您正在寻找的事情。只需使用 .hide
class 在页面加载时默认隐藏下拉菜单,然后使用带有 call(this) 和 nextElementSibling 的按钮 onclick 切换它们。
这是代码。
<style>
.hide{
display:none;
}
</style>
<body>
<ul>
<li class="File">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction.call(this)">File</a>
<div class="dropdown-content hide" id="myDropdown">
<a href="#">Open</a>
<a href="#">Save</a>
<a href="#">Save As</a>
<a href="#">Close</a>
</div>
</li>
<li class="Edit">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction.call(this)">Edit</a>
<div class="dropdown-content hide" id="myDropdown2">
<a href="#">Undo</a>
<a href="#">Redo</a>
<a href="#">Cut</a>
<a href="#">Copy</a>
<a href="#">Paste</a>
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<script>
var drptochoose;
function myFunction() {
var isAlreadyOpen = false;
if(!this.nextElementSibling.classList.contains('hide'))
{
// if the clicked button dropdown is already open then use this bool to not show it again.
isAlreadyOpen = true;
}
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (!openDropdown.classList.contains('hide')) {
openDropdown.classList.toggle("hide");
}
}
if(!isAlreadyOpen)
{
// if the dropdown was hidden when clicked then show it
this.nextElementSibling.classList.toggle("hide");
}
}
</script>
</body>
希望对您有所帮助。
window.onclick = function(e) {
if (e.target.matches('.dropbtn')) {
var allDropDown = document.querySelectorAll('.dropdown-content');
//This will hide all the dropdown for everytime you click
[].forEach.call(allDropdown, function(dropdown){
dropdown.classList.add('hide');
});
//This will show the subdrop down of that menu
var dropdown = e.target.parent.querySelector(".dropdown-content");
dropdown.classList.add('show');
}
}
}