Question

我使用jQuery添加了一个click事件来更改我的CSS。单击工作和CSS更改，但然后jQuery继续运行并最终将CSS恢复到原始状态。

jQuery代码：

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

CSS代码：

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

就像我说的，点击工作，元素被隐藏。但是，当jQuery完成代码运行时，它会立即恢复。使用谷歌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

您可以尝试切换具有'visibility：hidden'的类，以完全避免此问题。

#CSS
.vh{
    visibility:hidden
    #or you could use display:none
}

#Javascript
$('.myClass').click(function(){
    $('.myClass').toggleClass('vh');
});

如果这有助于您，请告诉我。 -Mike

Answer 2

我的猜测是，当您的页面运行时，还会运行其他一些CSS或jQuery并覆盖“可见性：隐藏”;＆＃39;我还建议切换你的课程并使用＆quot; display：block;＆＃39;和＆＃39;显示：无＆＃39;过度＆＃39;可见性：隐藏＆＃39;。

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

jQuery将CSS恢复到原始状态

2 个答案: