нажмите на кнопку, покажите div, уменьшите непрозрачность всех, кроме div, закройте div и верните все вещи по умолчанию

Question

это, кажется, большая проблема для меня! У меня есть div, что я нажимаю на кнопку, этот div показан и непрозрачность всех элементов в тело площадь уменьшена. , но я хочу, когда закрываем этот div, все элементы возвращаются к прежним css атрибутам. я использовал этот jquery код, но я не знаю, как вернуть прежние css атрибуты: (пример: до щелчка на showDiv некоторые элементы непрозрачности было 0,9 и другой 1, но когда нажмите на hideDiv все элементы непрозрачности 1)

$(document).ready(function(){ 
    $(".showDiv").click(function(){ 
     $("#main").find("*").css("opacity","0.5").off('click'), 
     $(".div").css({"display":"block","opacity":"1"}); 
    }); 
    $(".hideDiv").click(function(){ 
     $("#main").find("*").css("opacity","1"), 
     $(".div").css("display","none"); 
    }); 
}); 

Answer 1

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

$(".showDiv").click(function(){ 
    $("#main").addClass("active"); 
}); 
$(".hideDiv").click(function(){ 
    $("#main").removeClass("active"); 
}); 

Тогда в вашем CSS:

#main * { 
    opacity: 0.5; 
} 

#main.active * { 
    opacity: 1; 
} 

#main .someChild { 
    opacity: 0; 
} 

#main.active .someChild { 
    opacity: 0.5; 
}