javascript - 使用 .height() 方法修改 div 高度后，添加类不会更改高度

Question

我可以通过添加和删除 .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() 进行扩展 并在可能的情况下使用类折叠。

Answer 1

当您使用 jQuery.height() 时，它会向元素添加内联样式，内联样式优先于所有其他样式，除了带有 !important 标志的样式。

关于 css 优先级的好读物:http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

jquery 文档:http://api.jquery.com/css/