1
首先，我是新的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'？ – talkhabi
我從來沒有使用過jQuery，但看到了代碼片段。這很可能，但我不知道如何實現它。 – Helicity