Question

我可以通过添加和删除$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive类来切换.box和0px之间30px的高度。这很好用。

但是，我还有另一个功能，可以使用.collapsed方法在.box和30px之间切换60px的高度。我遇到的问题是，如果我使用.height()来修改.height()的高度，则添加.box类不再会影响.collapsed的高度。 .box评估为$(.box).hasClass("collapsed")，但高度不会更改为true。

我的问题是，为什么会发生这种情况？

FIDDLE： https://jsfiddle.net/x89dbbw1/4/

HTML：

0px

CSS：

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

JS：

.box {
    width: 160px;
    height: 30px;
    background-color: orange;
}

.collapsed {
    height: 0px;
}

注意：如果我通过添加和删除类在$(".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展开并使用类折叠，如果可能的话

Answer 1

使用jQuery.height（）时，它会为元素添加内联样式，内联样式优先于除!important标志之外的所有其他样式。

关于css优先级的详细阅读：http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

jquery docs：http://api.jquery.com/css/

Answer 2

这是因为您要添加height内联并覆盖CSS 你应该这样做

            $(".toggle_collapse_button").on("click", function() {

                $(".box").removeClass("height60");
                $(".box").removeClass("height30");
                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);
                    $(".box").addClass('height30');

                } 
                else if ($(".box").height() == 60) {
                    $(".box").addClass('height60');
                }
            });

当然正确的CSS样式到height30和height60

检查示例

the Example

使用.height（）方法修改div高度后，添加类不会更改高度

2 个答案: