jQuery — как закрыть элемент при клике за его областью

Admin WordPress

Как закрыть одну область при клике на другую. Например, такое часто бывает, когда нужно закрыть меню при клике за ним.

Читайте также, как сделать такое на чистом JavaScript.

Алгоритм

При наведении мышки на один объект возникает событие, которое вешает новый класс на другой.

Мы наводим мышкой на объект с классом:
get-icon

Новый класс:
new-class

Добавляется на уже существующий:
what-class-to-add

Если мышка уходит с этого объекта, всё возвращается на исходные позиции, т.е. новый класс удаляется.

Код:

<div class="get-icon"> </div>

( function( $ ) {
    $(document).ready(function(){

        $('.get-icon').on('mouseover touchstart', function() {
            if (document.querySelector('.get-icon') !== null) {
                $('.what-class-to-add').addClass('new-class');
            }
        });

        $('.get-icon').on('mouseout', function() {
            if (document.querySelector('.new-class') !== null) {
            $('.what-class-to-add').removeClass('new-class');
            }
        });
    });
} )( jQuery );
Метки:

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"jQuery — как закрыть элемент при клике за его областью"