动态潜水高度

Question

我有这个HTML代码：

<div id="container">
    <div id="feedbackBox"></div>   
</div>

#feedbackBoxdiv最初不会出现在中。

CSS用于集中div:

#container {
    position: absolute; width: 380px; height: 360px; left: 50%; top:50%; padding: 30px;
    margin-left: -220px; margin-top: -210px; 
} 

但我需要通过jQuery更改#feedbackx的height。

我测试了它，但它不起作用：

.expandInfo {
    height: 500px;
    margin-top: -221px;
}
$("#container").removeClass().addClass('expandInfo');

但它不起作用！CSS类不适用，更不用说重新进行（计算）以使div保持集中。

Answer 1

由于选择器优先级不同，高度不会改变。(http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector)

您通过ID设置#container的高度。.exexpandInfo的高度由类定义。但是在CSS中，ID选择器的优先级高于类选择器。

试试看：

#container.expandInfo {
    height: 500px;
    margin-top: -221px;
}

此选择器具有ID优先级和类优先级。它将覆盖#container 的高度

Answer 2

这里有一个例子
http://codepen.io/alfonsodev/pen/aKwiG

我看到你在css中使用#container，然后删除类。因为容器并没有任何类是没有意义的。

看看这个示例容器有一个类容器，然后单击可以显示框并应用所需的类。