Переключить .dimBackground() по щелчку

Question

Я пытаюсь затемнить фон моего основного содержания в то время как акцентируя на боковой панели, которая должна отображаться с правой стороны, поэтому я использую dim-background JQuery плагин. Я хочу переключить метод .dimBackground() для моего элемента, когда я нажимаю его триггер. Он добавляет div с классом dimbackground-curtain, и он просто складывает этот div, когда я нажимаю на курок, делая все темнее и темнее.

Я хочу иметь возможность переключать как боковую панель, так и затемнение над основным контентом. И если это возможно, чтобы иметь возможность переключать его, если я нахожусь за пределами боковой панели.

Пример код из скрипки:

$('.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; 
    } 
}); 

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