在单击时切换. dimbackground()方法

Toggle .dimBackground() method on click

本文关键字：方法 dimbackground 单击      更新时间：2023-09-26

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

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

示例代码:

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

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

根据用法指南，有一个.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;
  }
});

您可以尝试一下，看看它是否提供了类似的功能:

$('.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
      });*/
});
相关文章：