Jquery下拉菜单显示/隐藏多个

Jquery dropdown menu show/hide multiple

本文关键字：隐藏 下拉菜单 显示 Jquery      更新时间：2023-09-26

我一直在看很多问题/答案，但仍然无法解决我的问题。所以我有一个JS下拉菜单(点击，而不是悬停)，但如果我打开一个下拉菜单，我点击到第二个菜单，然后另一个下拉菜单将打开，但前一个不会关闭。

点击菜单外部关闭下拉菜单，这是伟大的，但它是不够的，我希望第一个下拉菜单关闭，即使点击第二个!

<li><a onclick="myFunction_tools()" class="dropmenu" href="#">Tools</a></li>
<div id="myToolsDropdown" class="down">
    <div>
        Content here...
    </div>
</div>
<li><a onclick="myFunction_forum()" class="dropmenu" href="#">Forum</a></li>
<div id="myForumDropdown" class="down">
    <div>
        Content here...
    </div>
</div>

JS:

function myFunction_tools() {
    document.getElementById("myToolsDropdown").classList.toggle("show");
}
function myFunction_forum() {
    document.getElementById("myForumDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropmenu')) {
    var dropdowns = document.getElementsByClassName("down");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
$(".down").click(function(e){
  e.stopPropagation();
});

EDIT 2:

这里有一个解决方案，应该对你有用:

$(document).ready(function() {
	$('.dropmenu').click(function(e) {
  	e.preventDefault();
    $('.down').hide();
    $(e.target).next('.down').show();
  });
});
.down {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a class="dropmenu" href="#">Tools</a>
<div id="myToolsDropdown" class="down">
    <div>
        Content here...
    </div>
</div></li>
<li><a class="dropmenu" href="#">Forum</a>
<div id="myForumDropdown" class="down">
    <div>
        Content here...
    </div>
</div></li>

原始:

当你点击下拉菜单时，你可以防止所有下拉菜单关闭:

如果(

! event.target.matches (.dropmenu))

您必须更改条件，因此它只匹配当前活动的下拉列表。比如"if the event target matches the current active dropdown, prevent action"。您可以通过检查open类来确定当前活动的下拉列表。

编辑:您可能只需要将条件更改为: 
if (!event.target.matches('.dropmenu.active'))

所以它关闭点击时的所有下拉菜单，不是在.dropmenu.active上，然后触发点击。

此外，因为你似乎是使用jQuery无论如何，你可以优化你的代码通过使用jQuery在整个脚本:

$(window).click(fucntion(event) {
    var $target = $(event.target);
    if(!$target.hasClass('show')){
        $('.down').removeClass('show');
        $target.addClass('show');
    }
});

只需删除函数上一个下拉菜单的show类。例如:

function myFunction_tools() {
    document.getElementById("myToolsDropdown").classList.toggle("show");
    document.getElementById("myForumDropdown").classList.remove("show");
}
相关文章：