Переключить классы с помощью jQuery, нажав кнопку и нажав другой элемент, чем выбранный

Question

Я бы хотел переключить ящик с помощью кнопки «drawer-toggle», как показано в фрагменте.

Единственная проблема заключается в том, что когда ящик открыт, я хочу закрыть его и нажатием на кнопку .drawer-div.

Кто-нибудь может помочь мне с этим? Должен быть более эффективный способ.

класс .locked используется для цели css.

$(".drawer-toggle").click(function(e){ 
 
\t $(".drawer").toggleClass('open'); 
 
\t $(".main").toggleClass('locked'); 
 

 
\t e.stopPropagation(); 
 
}); 
 

 
$(".main").click(function(){ 
 
\t if ($(".drawer").hasClass('open')) { 
 
\t \t $(".drawer").toggleClass('open'); 
 
\t \t $(".main").toggleClass('locked'); 
 
\t } 
 
});

body, 
 
html { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.locked { \t \t 
 
\t overflow: hidden !important; 
 
} 
 
.drawer { 
 
    position: fixed; 
 
    background-color: $white; 
 
    width: 200px; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: -200px; 
 
    padding: 20px; 
 
    border-left: 1px solid $border-color; 
 
    transition: all 0.3s ease 0s; 
 
} 
 
.drawer.open { 
 
    right: 0; 
 
} 
 
.drawer.open ~ .main { 
 
    left: -200px; 
 
} 
 
.drawer.open ~ .main:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: rgba(0,0,0,0.4); 
 
    z-index: 900; 
 
} 
 
.main { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 0; 
 
    background-color: grey; 
 
    transition: all 0.3s ease 0s; 
 
} 
 
.drawer-toggle { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background-color: green; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="drawer"> 
 
    <a class="drawer-toggle">toggle</a> 
 
    <ul> 
 
    <li><a href="#">Menu item</a></li> 
 
    </ul> 
 
</div> 
 
<div class="main"> 
 
    <a class="drawer-toggle">toggle</a> 
 
</div>

Answer 1

Добавить слушателя по документу и внутри проверки обработчика, если цель выдвижной ящик или кнопка переключения.

$(document).on('click', function(event) { 
    var $tgt = $(event.target) 
    if (!$tgt.closest('.drawer').length && !$tgt.closest('.drawer-toggle').length && $('.drawer').hasClass('open')) { 
    $(".drawer").removeClass('open'); 
    $(".main").removeClass('locked'); 
    }  
});