通过jQuery设置di​​splay-property - 在Chrome中不起作用？

Question

我有以下问题.我有这个jQuery脚本:

$(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', '10000000 em');
        $(this).next().css('display', 'table-row-group');
        alert($(this).next().css('display'));
    })
});

当用户点击表的thead(拥有class="opening")并将此CSS设置为tbody同一个表的元素(由表示$(this).next())时:

style="display: table-row-group;

这适用于FireFox和Internet Explorer,但它在Chrome中不起作用.

我已经获得了以下行为(正如您在前面的代码片段中看到的,我已经放了一些alert()来调试代码):

1. INTO second function, chrome: true

2. 然后它按照我的预期设置CSS属性:

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

   当执行alert()代表我的tbody元素的CSS设置的第二个时:

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

   它打印预期的值:table-row-group并且它是正确设置的,因为我看到警报弹出窗口,在它下面我的页面正确呈现

3. 当我点击了警报弹出它消失的OK按钮,我的tbody元素有一些可视化的问题,特别是什么情况是,该tbody元素已设置style="display: block;"而不是style="display: table-row-group;",这是我获得的tbody

似乎Chrome首先正确设置display: table-row-group;"(因为我tbody在第二个警告弹出窗口下看到正确位置的元素),然后display: block;"在单击此弹出窗口的Ok按钮时自动将其设置为.

为什么？我错过了什么？我该如何解决这个问题？

谢谢

Answer 1

我不认为 Chrome 有任何理由应该重置你的样式；错误可能出现在代码的其他地方。创建一个最小的示例，以确保没有第二个事件处理程序执行此意外重置。

接下来是禁用插件。您可能在 Chrome 中安装了一个可以更改 CSS 的插件。