单击按钮，显示div，减少除div外的所有不透明度，关闭div并将所有内容返回默认状态。

Question

这对我来说似乎是个大问题！我有一个 div ，我点击了一个按钮，显示了这个div，减少了body区域中所有元素的不透明度。但是我希望在关闭这个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;
}