Javascript 如何一次只打开一个下拉列表

我的网站上有一些下拉列表，我不知道如何让它们一次只打开一个。我已经尝试在默认情况下首先隐藏它们，但它似乎仍然可以一次打开所有它们。。。我错过什么了吗？谢谢大家!

以下是HTML：

<div class="click-nav">
    <ul>
        <li>
        <a href="#">Dropdown</a>
        <ul class="sub">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
        </ul>
        </li>
    </ul>
</div>

---

我相信这是因为您没有为任何下拉列表指定任何标识参数，而这里只有一个包含不同子导航项的下拉列表。还是将它们称为单独的下拉列表？我认为应该为每个元素分配不同的id，然后使用

getelementbyid

jquery函数。我就是这样做的。我不知道它是否适合你。

试试这个。由于您已经有了

$（function（）

，这是

document.ready

的快捷方式，因此不需要另一个

document.ready

$（函数（）{
$（'.单击nav>ul'）.toggleClass（'no-js'）；
$（'.click nav.js ul'）.hide（）；
$（'.click nav.js'）。单击（函数（e）
{
$（this）.find（'ul'）.slideToggle（400）；
$（'.click nav.js ul'）.not（$（this.find（'ul'））.hide（）；
e、 预防默认值（）；
e、 停止传播（）；
});      
})；

这可能有点老了，但我已经为每一次点击使用了唯一的id将一个脚本放在一起，在我的例子中，我使用了IMG而不是按钮

下面的代码是带有一个图像的下拉列表，该图像具有一个onlick，单击该图像时，该图像将与来自数据库的唯一post id一起发送到myFunction中，该id必须是echo'd。 myDropdown还用于显示下拉列表，方法是向其中的下拉列表内容类添加切换“show”

此外，myDropdownUNIQUEPOSTID对myDropdown本身也是唯一的

<div id="dropduttonholder"><img width="20" height="20" style="cursor:pointer;"
 onclick="myFunction(<?php echo $postid['streamitem_id'] ?>);" 
class="dropbtn" src="../newimages/postdropimg.png" /></div>
<div class="dropdown" id="<?php echo $postid['streamitem_id'] ?>">
  <div id="myDropdown<?php echo $postid['streamitem_id'] ?>" class="dropdown-content">
    <a href="#"></a>
  <a href="#"></a>
    <a href="#"></a>
  </div>
</div>

您正在使用类名引用下拉列表。请为每个下拉列表指定一个id，并使用这些id来引用它们。这将使您可以控制要关闭的下拉列表。感谢您的帮助！我需要它工作，以便在您单击似乎不工作的下拉列表时再次关闭该下拉列表。
<div id="dropduttonholder"><img width="20" height="20" style="cursor:pointer;"
 onclick="myFunction(<?php echo $postid['streamitem_id'] ?>);" 
class="dropbtn" src="../newimages/postdropimg.png" /></div>
<div class="dropdown" id="<?php echo $postid['streamitem_id'] ?>">
  <div id="myDropdown<?php echo $postid['streamitem_id'] ?>" class="dropdown-content">
    <a href="#"></a>
  <a href="#"></a>
    <a href="#"></a>
  </div>
</div>

<script>
  function closeOpenItems() {
      openMenus = document.querySelectorAll('.dropdown-content');
      openMenus.forEach(function(menus) {
        menus.classList.remove('show');
      });  
  }

/* Javascript only */
function myFunction(streamitem_id) {
    closeOpenItems();
    var acc = document.getElementById("myDropdown"+streamitem_id).classList.toggle("show");

  }

 // Closes the menu in the event of outside click 
        window.onclick = function(event) { 
         if (event.target.matches('.dropdown-content *')) {
    return;
   } 
            if (!event.target.matches('.dropbtn')) {

                var dropdowns =  
                document.getElementsByClassName("dropdown-content"); 
                  
                var i; 
                for (i = 0; i < dropdowns.length; i++) { 
                    var openDropdown = dropdowns[i]; 
                    if (openDropdown.classList.contains('show')) { 
                        openDropdown.classList.remove('show'); 
                    } 
                } 
            } 
        } 
</script>