Javascript 多次单击打开下拉菜单一次只打开一个

首先，我不熟悉javascript、html和CSS，所以请耐心听我说。我到处寻找我的问题的答案，但我找不到任何适合我的特定代码的东西

我试图创建一个网页，它有多个下拉菜单，当用户点击时，每个下拉菜单都会打开。我可以这样做，但出现了一个问题。如果我打开一个下拉菜单，然后单击另一个下拉菜单，第一个菜单将保持打开状态。我想在打开新菜单时关闭第一个菜单

下面是我的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 ?>&sector=<?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 ?>&sector=<?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 ?>&sector=<?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 ?>&sector=<?php print $insect ?>&id=3NPR-1KM-REFL40">[NPRS]:3-hr 1-km Reflectivity >=40 dBZ</a>
    </div>
</div>
</td>

/* 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');
                        }
                }
        }
}

函数myFunction（id）{
var dropdowns=document.getElementsByCLassName（“dropdown2内容”）；
var i；
对于（i=0；i

在打开单击的下拉列表之前，您可以关闭所有下拉列表

function myFunction(id) {
    var dropdowns = document.getElementsByClassName("dropdown2-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                            openDropdown.classList.remove('show');
            }
    document.getElementById(id).classList.toggle("show");
}

函数myFunction（id）{
var dropdowns=document.getElementsByClassName（“dropdown2内容”）；
var i；
对于（i=0；i

我认为最好的解决方案是使用引导，它可以立即处理这些情况：看看它是如何工作的

如果由于某种原因不能使用引导，并且可以使用jQuery，那么这也很容易。单击按钮时，将隐藏所有下拉列表，然后仅显示相邻的下拉列表。事情会是这样的：

$('.dropbtn2').click(function(){
  $('.dropdown2-content).hide();  // hide all the dropdowns
  $(this).next().show();          // show the next sibling
});

---

如果既不能使用Bootstrap，也不能使用jQuery，只需复制

窗口中的代码。如Funk Doc所说，在
myFunction
中显示元素之前，单击
部分即可。
如果可以包括
jQuery
并使用它，这将起作用：


$（文档）.ready（函数（）{
$（文档）.on（'单击'，'.dropbtn2'，函数（）{
$（'.dropbtn2'）。不是（this.next（）.removeClass（'show'）；
$（this.next（）.toggleClass（'show'）；
});
$（文档）。在（'单击'）上，函数（e）{
如果（！$（e.target）.最近（'.dropbtn2'）.长度）
$（'.dropbtn2'）.next（）.removeClass（'show'）；
});    
});
/*dropdown2用于其余的下拉菜单*/
.dropbtn2{
背景色：#4444；
颜色：#FFFFFF；
边距：0 1px 0；
填充物：4px 3px；
宽度：自动；
字体：粗体10px arial；
光标：指针；
文本对齐：居中；
空白：nowrap；
文字装饰：无；
边界：无；
}
.dropbtn2:悬停，.dropbtn2:焦点{
背景色：#000066；
边界：无；
}
.下拉列表2{
位置：相对位置；
显示：内联块；
z指数：30；
}
.dropdown2内容{
显示：无；
位置：绝对位置；
填充：0px；
宽度：自动；
最小宽度：160px；
空白：nowrap；
背景：#DDDDDD；
溢出：自动；
z指数：1；
边框样式：实心；
边框宽度：1px；
边框颜色：#000000；
}
.dropdown2内容a{
颜色：#000000；
填充物：2个3个；
字体：10px arial；
显示：块；
}
.下拉菜单a:悬停{
背景：#000066；
颜色：#FFF；
边界：无；
文字装饰：无；
}
.表演{
显示：块；
}

SPCGuidance
反射率
是否可以使用
jQuery
？我以前从未使用过jQuery，但见过代码片段。这是可能的，但我不知道如何实施。谢谢。这用于在打开另一个菜单时关闭上一个菜单。然而，现在如果我打开了一个菜单并想关闭它，点击它的标题就不再起作用了。我必须单击其他菜单或窗口中的某个位置来关闭它。你对此有什么建议吗？
$('.dropbtn2').click(function(){
  $('.dropdown2-content).hide();  // hide all the dropdowns
  $(this).next().show();          // show the next sibling
});