仅在显示下拉菜单时显示叠加

Question

我得到了这个工作，但只有当我点击按钮时。每当我在按钮外部单击时，覆盖 active 类就无法按预期工作。

我想仅在显示下拉菜单时显示“覆盖活动”类。

演示：https://jsfiddle.net/Laxu6s0n/

HTML：

<div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   YOLO
                </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">111</a>
                    <a class="dropdown-item" href="#">222</a>
                  </div>
                </div>
<p>This is a body</p>
<div class="overlay">
I'm an overlay
</div>

JS：

$(".dropdown-toggle").click(function () {
    $('.overlay').toggleClass('active');
});

CSS：

.overlay.active {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

Answer 1

dropdown-menu 不是dropdown-toggle 的子级，因此当您点击菜单时，它不会触发您的点击功能，因此您只需向您的dropdown-item 添加点击事件。

$(".dropdown-toggle, .dropdown-item").click(function () {
    $('.overlay').toggleClass('active');
});

如果在下拉菜单之外单击，则要关闭覆盖，您需要向窗口添加一个侦听器。

$(window).on('click', function(e) {
   if ($('.overlay').hasClass('active')) {
      $('.overlay').removeClass('active')
   }
})

Answer 2

这是因为您在单击下拉菜单时切换课程。不是点击其他任何地方。通过添加仅删除类的附加事件处理程序可以轻松解决：

document.addEventListener('click',function(e){
    if(e.target && e.target.id != 'dropdownMenuButton'){
        $('.overlay').removeClass('active');
    }
});`