Как закрыть одну область при клике на другую. Например, такое часто бывает, когда нужно закрыть меню при клике за ним.
Читайте также, как сделать такое на чистом 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 );
( 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 );
