javascript - 单击时切换 .dimBackground() 方法

Question

我试图调暗主要内容的背景，同时强调需要从右侧显示的侧边栏，因此我使用 dim-background jquery 插件。我想在单击触发器时切换元素的 .dimBackground() 方法。它添加了一个带有 dimbackground-curtain 类的 div，当我单击触发器时，它只是堆叠这个 div，使一切变得越来越暗。

我希望能够切换侧边栏和主要内容上方的调光。如果可能的话，如果我点击侧边栏外部也能够切换它。

fiddle 的示例代码:

$('.trigger').click(function() {
  $('.sidebox').toggleClass('sidebox-open');
  $('.sidebox').dimBackground({
    darkness: 0.35
  });
});

没有 CDN 提供此 library ，但是，这里是 Fiddle 描述我的问题。

Answer 1

根据Usage指南中，有一个 .undim 方法。 似乎 .dimBackground 不会切换，因此您必须将状态存储在您的一端并调用 .dimBackground 或 .undim，具体取决于状态并切换。

示例:

var dimmed = false;
$('.trigger').click(function() {
  var $sidebox = $('.sidebox'); //avoid searching the element twice
  if(dimmed){
      $sidebox.removeClass('sidebox-open');
      $sidebox.undim();
      dimmed = false;
  } else {
      $sidebox.addClass('sidebox-open');
      $sidebox.dimBackground({
        darkness: 0.35
      });
      dimmed = true;
  }
});