Как показать/скрыть элемент по клику на элемент и вне его?
Добрый день.
Есть код
------
html
------
js
$(document).ready(function(){
jQuery('.blog-img .overlay').on(click(function(){
jQuery(this).toggleClass("test");
});
}); для показа и скрытия если click был непосредственно на элементе
$(document).mouseup(function (e){
var div = jQuery('.overlay');
var buton=jQuery('this');
if (!buton.is(e.target) && buton.has(e.target).length === 0) {
div.removeClass('test');
}
}); для скрытия элемента, если click был не по нему.
-----------------
css
.test{
opacity:1;
z-index:500;
}
.overlay{
z-index:100;
opacity:0
}
Помогите пожалуйста сделать так, чтобы при клике на элемент он появлялся, при повторном клике на него или вне его области отображения чтобы он исчезал.
Лучше не класс добавлять, а вызывать методы show() и hide(). И тогда opacity не нужно. Просто изначально чтобы элемент был display: none в css. А по клику вне элемента вроде все правильно. Только вместо ремува класса вызвать метов hide(). А идентификатор, по которому вызывать методы для элемента нужно чтобы изначально был. Имеется ввиду класс или айди.
Ну у меня на данный момент .overlay(css {position:absolute;}) постоянно присутствует на своем месте выше своих 'родителей', просто меняется его прозрачность. Т.е. первый раз кликнули по .overlay прозрачность = 1, второй раз нажали на .overlay прозрачность = 0. Нажали вне блока .overlay его прозрачность также = 0.
