Question

我的网站上有一些下拉菜单，我无法弄清楚如何让它们一次只打开一个。我首先尝试将它们全部隐藏起来，但它似乎仍然会立刻打开所有这些......我错过了什么？谢谢！

这是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');
    }
  });
});

Answer 1

试试这个。由于您已经$(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

Answer 2

这可能有点陈旧，但是我为每个onclick使用唯一的ID组合了一个脚本，就我而言，我使用的是IMG而不是按钮。

下面的代码是带有图像的下拉列表，该图像具有点击状态，当单击该命令时会将其与数据库中的唯一帖子ID一起发送到myFunction中，并且必须回显该ID。 myDropdown还通过将切换“显示”添加到其中的dropdown-content类中来显示下拉菜单。

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>

onlclick事件发送到的以下脚本将首先查找打开的下拉列表的所有实例，并将其传递给CloseItemsOpen函数，以从任何下拉列表内容类中删除“显示”。

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

我还通过target.matches添加了一个dropdown-content的返回值，以阻止在其内部单击时关闭当前打开的任何下拉菜单。

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

Answer 3

我认为这是因为您没有为任何下拉列表分配任何身份参数，这里只有一个下拉列表包含不同的子导航项。或者您将它们称为单独的下拉菜单？我认为你应该为每个元素分配不同的id，然后使用getelementbyid jquery函数。我就是这样做的。我不知道它是否适合你。

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

3 个答案: