单击时切换 .dimBackground() 方法

Question

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

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

来自 fiddle 的示例代码：

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

没有提供此 library, however, here is the Fiddle 描述我的问题的 CDN。

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;
  }
});

Answer 2

您可以试试这个并检查它是否为您提供类似的功能：

$('.trigger').click(function() {
   $('.sidebox').toggleClass('sidebox-open');
   if($('.sidebox').attr('class') == "sidebox sidebox-open"){
       $('.sidebox').fadeTo( "slow" , 1);
   }
   else{
       $('.sidebox').fadeTo( "slow" , 0);
   }
   /*$('.sidebox').dimBackground({
      darkness: 0.35
      });*/
});

单击时切换 .dimBackground() 方法

Toggle .dimBackground() method on click

javascript

jquery

jquery-plugins