1
まず、私はjavascript、html、およびCSSで新しいので、私に同行してください。私は私の質問に対する答えをどこからでも見てきましたが、私の特定のコードにはうまくいかないものは見つかりませんでした。複数のClick-to-Openドロップダウンメニューが1つだけ開くようにする
複数のドロップダウンメニューを持つWebページを作成しようとしています。ユーザーがクリックするとそれぞれが開きます。私はこれを行うことができますが、問題が発生します。ドロップダウンメニューを開いて別のドロップダウンメニューをクリックすると、最初のメニューが開いたままになります。新しいメニューを開くと、最初のメニューが閉じられます。ここで
は、ドロップダウンメニューの2と私のhtmlコードのセクションです：
<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