Question

我在http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down上找到了这段代码：

this.report = spreadsheet.getSheetByName(data.reportSheet);

这是一个有效的代码。

我试图弄清楚id #panel的脚本第二个CSS声明块是如何工作的。为什么第二个声明中的规则不会立即覆盖第一个规则中的规则，而是仅在

之后

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>
 
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 100px;
    display: none;
}

</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

被称为？

Answer 1

当您的页面加载应用于#panel的样式时：

`text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
padding: 100px;
display: none;`

slideDown（）适用于使用jQuery方法隐藏的元素，并且在CSS中显示：none（但不是可见性：隐藏）.Hence，所有slidedown方法都会删除display:none样式属性，并且您的#panel变为可见。

CSS双重声明（jQuery）

1 个答案: