Question

我试图创造一个＆＃34;关掉灯＆＃34;当用户点击＆＃34; Read More＆＃34;按钮。

问题在于它只运行一次，当用户点击“阅读更多”并关闭灯光时（png半透明背景似乎覆盖当前的一个）。如果用户点击＆＃34;关闭文字＆＃34;效果并没有消失。

var $j = jQuery;
$j(document).ready(function(){

// Hide shadow

jQuery(".shadow-class").css('background', 'none');

jQuery(".custom-read-more-toggle").on("click", function() { 

if( jQuery(".shadow-class").css('background', 'none') ) {
  jQuery(".shadow-class").css({background : 'url(/*PNG HERE*/)'});

 } else if (jQuery(".shadow-class").css('background', 'url(/*PNG HERE*/)')){ 
jQuery(".shadow-class").css('background', 'none');
}

});

});

.custom-read-more-toggle是＆＃34; Read More＆＃34;而.shadow-class是用户点击按钮时出现的内容。如果你点击.custom-read-more-toggle，那么这个类就不会从DOM中消失。

.shadow-class {
z-index: 99999999999999;
}
.dark-overlay {
background: url(/* PNG HERE*/);

}

我已尝试过此处发布的其他解决方案，但我无法解决。

Answer 1

你应该这样检查：

if( jQuery(".shadow-class").css('background') == 'none' ) {

而不是：

if( jQuery(".shadow-class").css('background', 'none') ) {

当像.css(prop,value)一样使用时，它会设置属性值。当像.css(prop)一样使用时，它会获得属性值。

Answer 2

使用：if（jQuery（“。shadow-class”）。css（'background'）=='none'）

Answer 3

剪切您的代码

   else if (jQuery(".shadow-class").css('background', 'url(/*PNG HERE*/)'))

    { 
       jQuery(".shadow-class").css('background', 'none');
    }

  and paste this

      else if (jQuery(".shadow-class").css('background')=='none')

    { 
       jQuery(".shadow-class").css('background', 'none');
    }

Answer 4

尝试：

jQuery(".activ").css({background : 'url(/*PNG HERE*/)'});

jQuery(".custom-read-more-toggle").on("click", function() {
 if (!jQuery(".shadow-class").hasClass('activ');) {
  jQuery(".shadow-class").addClass('activ');
} else {
  jQuery(".shadow-class").removeClass('activ');
});

Answer 5

试试这个：if（jQuery（＆＃34; .shadow-class＆＃34;）。css（＆＃39; background-image＆＃39;）==＆＃39; none＆＃39;）

为什么jQuery click事件只能运行一次？

5 个答案: