Question

我正在使用jQuery .toggle来显示和隐藏div。我已经进行了设置，以便当它第一次切换时，用户点击的按钮背景会改变颜色。我想要做的是当用户再次单击按钮以显示div时恢复按钮背景颜色。有人可以帮忙吗？

非常感谢： - ）

这是我到目前为止所拥有的......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>

<script>
$(document).ready(function(){
    $("#billboardButton").click(function () {
        $("#billboard").toggle("slow", function() {
            $("#billboardButton").css("backgroundColor", "#333");
        });
    });
}); // End document ready
</script>

<style>
#billboardButton {
background-color:#f1f1f1;
color:#666;
padding:3px;
width:100px;
cursor:pointer;
text-align:center;
margin:0 auto;
}


</style>

<div id="test" style="width:970px;margin:20px auto;">
<div>
<div id="billboardButton">Close Ad</div>
</div>
<div id='billboard' style='width:970px; height:250px;background-color:#0C9;'>
</div>
</div>



</body>
</html>

Answer 1

我可以看到原始背景颜色在CSS文件中，因此您只需执行此操作：

$("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#333" : "");

查看结果：http://jsbin.com/ahatin/1

Answer 2

创建其他课程（例如 buttonPressedFirst ）。现在切换时：

if($("#billboardButton").hasClass('buttonPressedFirst'))  {
    $("#billboardButton").removeClass('buttonPressedFirst')
} else {
    $("#billboardButton").addClass('buttonPressedFirst')
}

Answer 3

创建一个类othercolor

.othercolor {

background-color:#333;

}

（文档）$。就绪（函数（）{

$("#billboardButton").click(function () {

    $(this).toggleClass("othercolor");

});

}）;

在jQuery切换后恢复CSS值

3 个答案: