Question

我一直在查看很多问题/答案，但仍然无法解决我的问题。所以我有一个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();
});

Answer 1

编辑2：

这是一个应该适合您的解决方案：

＆＃13;

$(document).ready(function() {
	$('.dropmenu').click(function(e) {
  	e.preventDefault();
    $('.down').hide();
    $(e.target).next('.down').show();
  });
});

＆＃13;

.down {
  display: none;
}

＆＃13;

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

＆＃13;

原件：

点击下拉菜单时，您可以阻止关闭所有下拉菜单：

if（！event.target.matches（＆＃39; .dropmenu＆＃39;））

您必须更改条件，因此它仅匹配当前活动的下拉列表。喜欢＆＃34; if the event target matches the current active dropdown, prevent action＆＃34;。您可以通过检查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');
    }
});

Answer 2

只需删除上一个功能下拉菜单的show class。例如：

function myFunction_tools() {
    document.getElementById("myToolsDropdown").classList.toggle("show");
    document.getElementById("myForumDropdown").classList.remove("show");
}

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

2 个答案: