Прежде всего, я новичок в 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;
}
Любая помощь будет принята с благодарностью. Благодарю.
EDIT:
У меня есть.
Для части 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