【发布时间】：2017-01-26 18:51:50
【问题描述】：
首先，我是 javascript、html 和 CSS 的新手，所以请耐心等待。我到处寻找问题的答案，但找不到任何适用于我的特定代码的东西。
我正在尝试创建一个具有多个下拉菜单的网页，并且每个下拉菜单都会在用户单击它时打开。我能够做到这一点，但出现了问题。如果我打开一个下拉菜单，然后单击另一个下拉菜单，则第一个菜单保持打开状态。我希望在打开新菜单时关闭第一个菜单。
这是我的 html 代码的一部分，其中包含 2 个下拉菜单：
<table class="prodMenu">
<tr><td>
<div class="dropdown2">
<button onclick="myFunction('m1')" class="dropbtn2">SPCGuidance</button>
<div id="m1" class="dropdown2-content">
<a href="sseonew12.php?run=<?php print $inrun ?>&cycle=<?php print $incyc ?>§or=<?php print $insect ?>&id=4PR-TORN">[PR]:4-hr Calibrated Tornado Probability</a>
<a href="sseonew12.php?run=<?php print $inrun ?>&cycle=<?php print $incyc ?>§or=<?php print $insect ?>&id=4PR-HAIL">[PR]:4-hr Calibrated Hail Probability</a>
</div>
</div>
</td>
<td>
<div class="dropdown2">
<button onclick="myFunction('m2')" class="dropbtn2">Reflectivity</button>
<div id="m2" class="dropdown2-content">
<a href="sseonew12.php?run=<?php print $inrun ?>&cycle=<?php print $incyc ?>§or=<?php print $insect ?>&id=3SP-1KM-REFL40">[SP]:3-hr 1-km Reflectivity >=40 dBZ</a>
<a href="sseonew12.php?run=<?php print $inrun ?>&cycle=<?php print $incyc ?>§or=<?php print $insect ?>&id=3NPR-1KM-REFL40">[NPRS]:3-hr 1-km Reflectivity >=40 dBZ</a>
</div>
</div>
</td>
接下来是与这些下拉菜单交互的 .js 脚本部分。如果您单击窗口中的某个位置，我确实有一个关闭打开菜单的功能。但是，我不确定如何创建一个在打开另一个下拉菜单时关闭第一个下拉菜单的功能。
// When the user clicks on the button, toggle between hiding and showing the dropdown content.
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks in window.
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
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');
}
}
}
}
最后是控制下拉菜单的 CSS 脚本部分：
/* dropdown2 is for the rest of the dropdown menus. */
.dropbtn2 {
background-color: #444444;
color: #FFFFFF;
margin: 0 1px 0 0;
padding: 4px 3px;
width: auto;
font: bold 10px arial;
cursor: pointer;
text-align: center;
white-space: nowrap;
text-decoration: none;
border: none;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #000066;
border: none;
}
.dropdown2 {
position: relative;
display: inline-block;
z-index: 30;
.dropdown2-content {
display: none;
position: absolute;
padding: 0px;
width: auto;
min-width: 160px;
white-space: nowrap;
background: #DDDDDD;
overflow: auto;
z-index: 1;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
.dropdown2-content a {
color: #000000;
padding: 2px 3px;
font: 10px arial;
display: block;
}
.dropdown2 a:hover {
background: #000066;
color: #FFF;
border: none;
text-decoration: none;
}
.show {
display:block;
}
任何帮助将不胜感激。谢谢。
编辑：
我明白了。
对于 Javascript 部分，当您单击另一个下拉菜单、在窗口外部单击或再次单击同一菜单的标题时，这会成功关闭当前下拉菜单。
function myFunction(id) {
var dropdowns = document.getElementsByCLassName("dropdown2-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if ( dropdowns[i] != document.getElementById(id) ) {
openDropdown.classList.remove('show');
}
}
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks in window.
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
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');
}
}
}
}
【问题讨论】：
-
可以用
jQuery吗？ -
我以前从未使用过jQuery，但看过sn-ps的代码。这可能是可能的，但我不确定如何实施。
标签： javascript jquery html css drop-down-menu