Question

首先，我是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 ?>&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>

接下来是与这些下拉菜单交互的.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');
                        }
                }
        }
}

Answer 1

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

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");
}

Answer 2

如果您可以加入jQuery并使用它，则可以使用：

$(document).ready(function(){
    $(document).on('click','.dropbtn2',function(){
        $('.dropbtn2').not(this).next().removeClass('show');
        $(this).next().toggleClass('show');
    });
    $(document).on('click',function(e){
        if(!$(e.target).closest('.dropbtn2').length)
            $('.dropbtn2').next().removeClass('show');
    });    
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="prodMenu">
<tr><td>
<div class="dropdown2">
<button class="dropbtn2">SPCGuidance</button>
    <div id="m1" class="dropdown2-content">
        <a href="#">[PR]:4-hr Calibrated Tornado Probability</a>
        <a href="#">[PR]:4-hr Calibrated Hail Probability</a>
    </div>
</div>
</td>
<td>
<div class="dropdown2">
<button class="dropbtn2">Reflectivity</button>
    <div id="m2" class="dropdown2-content">
        <a href="#">[SP]:3-hr 1-km Reflectivity >=40 dBZ</a>
        <a href="#">[NPRS]:3-hr 1-km Reflectivity >=40 dBZ</a>
    </div>
</div>
</td>

Answer 3

我说最好的解决方案是使用Bootstrap，它可以直接处理这些情况：看看它是如何工作的http://getbootstrap.com/components/#btn-dropdowns

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

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

如果您既不能使用Bootstrap也不能使用jQuery，只需复制windows.onclick部分中的代码，然后在myFunction中显示元素，就像Funk Doc所说。

有多个点击打开下拉菜单一次只能打开一个

3 个答案: