选择其他人时如何隐藏其他下拉菜单
Posted
技术标签:
【中文标题】选择其他人时如何隐藏其他下拉菜单【英文标题】：How to hide the other dropdown when others is selected 【发布时间】：2016-11-30 13:02:46 【问题描述】：我有一个带有 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>
【问题讨论】：
那么您的 html 开始无效。你不要关闭第一个li。
感谢您的快速回复，问题仍然存在。另一个下拉菜单仍然显示
你的css在哪里
已编辑，包含 CSS。
【参考方案1】：
您的代码的问题在于它会切换两个下拉菜单。因此，当它们都没有显示时，它们会得到这个类。
你可以这样做：
<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>
【讨论】：
【参考方案2】：你需要这样的东西
jsFiddleDemoNavBar
【讨论】：
【参考方案3】：我认为您不需要通过所有这些代码来完成您正在寻找的事情，因为我理解它。只需使用.hide 类在页面加载时默认隐藏下拉菜单，然后使用带有 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>希望这会有所帮助。
【讨论】：
【参考方案4】：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');
【讨论】：
以上是关于选择其他人时如何隐藏其他下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章