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

How to only open one dropdown at a time

本文关键字：一个 下拉列表 何一次      更新时间：2023-09-26

我的网站上有几个下拉列表，我不知道如何让它们一次只打开一个。我试着先默认隐藏它们，但似乎仍然可以同时打开所有。。。我是不是错过了什么？非常感谢。

这是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>

这是js:

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    e.preventDefault();
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
         $('.click-nav .js ul', this).slideUp();
         $('.clicker').removeClass('active');
    }
  });
});

试试这个。由于您已经有了$(function()，这是document.ready的快捷方式，因此您不需要另一个document.ready。

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) 
                            {
    $(this).find('ul').slideToggle(400); 
    $('.click-nav .js ul').not($(this).find('ul')).hide();
    e.preventDefault();
    e.stopPropagation();
  });      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
  <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>

JSFiddle

这可能有点旧，但我已经为每个onclick使用了唯一的id来编写脚本，在我的情况下，我使用了IMG而不是按钮。

下面的代码是一个带有onlick的图像的下拉列表，当单击该图像时，该图像将被发送到myFunction中，同时还有一个来自数据库的唯一帖子id，该id必须是echo'd。myDropdown也用于通过添加toggle"来显示下拉列表；显示"；到其中的下拉内容类。

此外，myDropdown本身是myDropdownUNIQUEPOSTID独有的。

<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>

onlick事件发送到的以下脚本将首先查找打开的下拉列表的任何实例，并将其传递到CloseItemsOpen函数中，以从任何下拉内容类中删除"show"。

然后，它将下拉当前单击的下拉列表，还允许您单击元素外部以关闭它。

我还通过target.matches添加了对下拉列表内容的返回，以阻止当前打开的任何下拉列表在单击内部时关闭。

<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>

我相信这是因为您没有为任何下拉列表分配任何标识参数，而这里只有一个具有不同子导航项的下拉列表。或者你把它们称为单独的下拉列表？我认为应该为每个元素分配不同的id，然后使用getelementbyidjquery函数。我就是这么做的。我不知道这对你是否有效。

相关文章：