Показывать наложение только при отображении раскрывающегося списка - PullRequest
Новая
       57

Показывать наложение только при отображении раскрывающегося списка

0 голосов
/ 04 мая 2020

Я получил это работает, но только если я нажму на кнопку. Всякий раз, когда я нажимаю за пределами кнопки, класс оверлея 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;
}

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Это потому, что вы переключаете класс при нажатии на выпадающий список. Не нажимая нигде. Это легко решить, добавив дополнительный обработчик событий, который удаляет только класс: 

document.addEventListener('click',function(e){
    if(e.target && e.target.id != 'dropdownMenuButton'){
        $('.overlay').removeClass('active');
    }
});`
1 голос
/ 04 мая 2020

dropdown-menu не является дочерним по отношению к dropdown-toggle, поэтому, когда вы нажимаете на меню, оно не запускает функцию щелчка, поэтому вам просто нужно добавить событие щелчка к вашему dropdown-item.

* 1005. *

Затем, чтобы закрыть оверлей, если щелкнуть за пределами выпадающего меню, вам нужно добавить слушателя в окно. 

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