我可以通过添加和删除 .collapsed
在 0px
和 30px
之间切换 .box
的高度类(class)。这很好用。
但是,我有另一个函数可以使用 .height 在
方法。我遇到的问题是,如果我使用 30px
和 60px
之间切换 .box
的高度().height()
来修改 .box
的高度,添加 .collapsed
class 不再影响 .box
的高度。 $(.box).hasClass("collapsed")
的计算结果为 true
,但高度不会更改为 0px
。
我的问题是,为什么会这样?
fiddle : https://jsfiddle.net/x89dbbw1/4/
HTML:
<button class="toggle_collapse_button">Toggle Collapse</button>
<button class="toggle_expand_button">Toggle Expand</button>
<p id="test">Collapsed: false</p>
<div class="box"></div>
CSS:
.box {
width: 160px;
height: 30px;
background-color: orange;
}
.collapsed {
height: 0px;
}
JS:
$(".toggle_collapse_button").on("click", function() {
if ($(".box").hasClass("collapsed")) {
$(".box").removeClass("collapsed");
}
else {
$(".box").addClass("collapsed");
}
document.getElementById("test").innerHTML = "Collapsed: " + $(".box").hasClass("collapsed");
});
$(".toggle_expand_button").on("click", function() {
if ($(".box").height() == 30) {
$(".box").height(60);
}
else if ($(".box").height() == 60) {
$(".box").height(30);
}
});
注意:如果我通过添加和删除类在 30px
和 60px
之间切换,效果很好,但我特别想使用 .height() 进行扩展
并在可能的情况下使用类折叠。
最佳答案
当您使用 jQuery.height() 时,它会向元素添加内联样式,内联样式优先于所有其他样式,除了带有 !important
标志的样式。
关于 css 优先级的好读物:http://vanseodesign.com/css/css-specificity-inheritance-cascaade/
jquery 文档:http://api.jquery.com/css/
关于javascript - 使用 .height() 方法修改 div 高度后,添加类不会更改高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34501554/