Question

我有一个可以使用的下拉菜单，但是当我在菜单外部单击时，我也希望它关闭...我尝试了一些已解决的解决方案，但是出了点问题，我无法弄清楚。我在这里错过了吗？非常感谢

$("#toggle").on('click', function() {
   $(".dropdown").toggleClass("dropdown--visible");
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

.dropdown {
  background: red;
  display: none;
}

.dropdown--visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle dropdown</button>

<div class="dropdown">
    <ul>
      <li>one</li>
      <li>two</li>
  </ul>
</div>

Answer 1

$("#toggle").on('blur click', function() {
   $(".dropdown").toggleClass("dropdown--visible");
});

$(document).click(function(){
    
});

.dropdown {
  background: red;
  display: none;
}

.dropdown--visible {
  display: block!important;
}
.dropdown--invisible {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle dropdown</button>

<div class="dropdown">
    <ul>
      <li>one</li>
      <li>two</li>
  </ul>
</div>

Answer 2

您已经为文档设置了单击事件侦听器，当您单击任意位置时，它将一直执行。您可以使用通用类过滤掉下拉事件。

<button id="toggle" class="dd">Toggle dropdown</button>

<div class="dropdown dd">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

$(document).click(function(e){
  if (!$(e.target).hasClass('dd')) {        
    $(".dropdown").removeClass("dropdown--visible");
  }
});

最好还使用 removeClass（）而不使用 hide（），因为hide（）添加了display：none;直接到元素，将很难控制。

Answer 3

此香草味解决方案使用handleDropdown函数来检查两个条件：
-按下切换按钮了吗？
-下拉菜单当前隐藏吗？

如果两者都为true，则显示下拉列表。否则，它会隐藏下拉菜单。

const dropdown = document.getElementsByClassName("dropdown")[0],
      toggle = document.getElementById("toggle");
document.addEventListener("click", handleDropdown);

function handleDropdown(event){
  if(event.target == toggle && dropdown.style.display != "block"){
    dropdown.style.display = "block";
  }
  else{
    dropdown.style.display = "none";
  }
}

.dropdown {
  background: red;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

切换下拉菜单并在外部单击隐藏

3 个答案: