jQuery 将 CSS 恢复到原始状态

Question

我使用 jQuery 添加了一个点击事件来更改我的 CSS。单击起作用并且 CSS 发生变化，但随后 jQuery 继续运行并最终将 CSS 恢复到原始状态。

jQuery 代码:

    $('.myClass').click(function(){
        $('.myClass').css({"visibility":"hidden"});
    });

CSS 代码:

   .myClass {
     height: 10px;
     width: 10px;
     background: red;
     visibility:visible;
   }

就像我说的，点击有效并且元素被隐藏。但是，当 jQuery 完成运行其代码时，它会立即恢复。使用 Google Chrome 的调试器工具，我看到这就是 jQuery 代码中将 CSS 恢复为使元素可见的关键点。

jQuery 的代码(第 4116 行):

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
line 4116      jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

我想我不明白这个 jQuery 代码发生了什么以及为什么我的 CSS 被还原了？

Answer 1

我的猜测是，当您的页面运行时，有一些其他 CSS 或 jQuery 正在运行并覆盖“visibility:hidden;”我还建议切换您的类(class)并使用“显示: block ；”和“显示:无”超过“可见性:隐藏”。

如果您提供其余的 HTML 和 jQuery，我可能会为您提供更准确的答案。