为什么我无法使用 JQuery style() 函数设置此 CSS 设置？

Question

我对这个 JQuery 脚本有一些问题（在使用Jquery-1.9.1.min.js 的项目上）：

$(document).ready(function () {
    $("thead.opening").click(function () {

        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        alert("INTO second function, chrome: " + is_chrome);

        $(this).next().css('width', '10000000em');
        $(this).next().css('display', 'table-row-group');

        //$(this).next().css('display', is_chrome ? 'table-row-group' : 'table-row-group');

        //alert($(this).next().css('display'));
    });
});

该脚本只是将 CSS 样式设置为与单击的thead元素相关的tbody元素，并按以下方式执行：

$(this).next().css('display', 'table-row-group');

它可以工作，但我还必须为此 CSS 属性设置!important，但如果我这样做，它就无法工作：

$(this).next().css('display', 'table-row-group !important');

所以在网上搜索我在 StackOverflow 上找到了这篇文章：How to apply !important using .css()?

因此，在前面的脚本中，我尝试使用：

$(this).next().style('width', '10000000em', 'important');
$(this).next().style('display', 'table-row-group', 'important');

反而：

$(this).next().css('width', '10000000em');
$(this).next().css('display', 'table-row-group');

但问题是我得到了这个错误的结果：

<tbody class="expanded" style="display: block; width: 1e+7em;">

所以看起来width属性设置正确，但显示属性设置不正确（事实上它是在块上设置的，而不是在table-row-group上设置的）

为什么？我缺少什么？我该如何解决这个问题？

总氮

Answer 1

我建议创建一个如下所示的类：

CSS

.forceDisplay { display: table-row-group !important; }

然后使用 jQuery 的 addClass() 方法来应用 !important 声明。

$('#element').addClass('forceDisplay');