0

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

非常感谢 ：-）

这是我到目前为止所拥有的……</p> 

<!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>
4

3 回答 3

1

我可以看到你的原始背景颜色在 CSS 文件中，所以你可以简单地这样做：

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

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

于 2013-07-03T12:58:22.310 回答
0

创建一个附加类（例如buttonPressedFirst）。现在切换时：

if($("#billboardButton").hasClass('buttonPressedFirst'))  {
    $("#billboardButton").removeClass('buttonPressedFirst')
} else {
    $("#billboardButton").addClass('buttonPressedFirst')
}
于 2013-07-03T13:01:02.430 回答
0

创建一个类 othercolor

.othercolor {

background-color:#333;

}

$(文档).ready(函数(){

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

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

});

});

于 2013-07-03T13:41:21.483 回答