jQuery toggle class & mouseup button issues

Question

Я использую 2 скрипта, как показано ниже.

Первый скрипт open представляет собой div, когда нажата кнопка с классом «bookaviewing».

Мне нужен div с классной «формой бронирования», чтобы закрыть, когда кто-то щелкнет за пределами формы «бланк заказа» - второй скрипт делает это.

Моя проблема - когда вы нажимаете кнопку более одного раза (поскольку она находится за пределами формы «формы бронирования»), она не закрывает «форму бронирования» ... она просто продолжает открываться.

Мне нужно совместить 2 приведенных ниже сценария & нужна помощь.

Сценарий 1

<script type="text/javascript"> 
// set click/toggle event on bookaviewing button to show form 
$('.bookaviewing').click(function() { 
    $('.booking-form').slideToggle(400).toggleClass('opened'); 
    return false; 
}); 
</script> 

Сценарий 2

<script type="text/javascript"> 
// close booking-form when click outside of div 
$(document).mouseup(function (e){ 
    var bookingform = $(".booking-form"); 
    if (!bookingform.is(e.target) && bookingform.has(e.target).length === 0){ 
     bookingform.hide(); 
    } 
}); 
</script> 

Answer 1

Вы должны исключить форму бронирования и кнопку переключения, чтобы избежать переключения открытия/закрытия в то же время:

http://jsfiddle.net/TrueBlueAussie/4vnvpcjb/3/

// set click/toggle event on bookaviewing button to show form 
$('.bookaviewing').click(function() { 
    $('.booking-form').slideToggle(400).toggleClass('opened'); 
    return false; 
}); 
$(document).on('mouseup', function (e){ 
    var bookingform = $(".booking-form"); 
    if (!bookingform.is(e.target) 
     && bookingform.has(e.target).length === 0 
     && !$(e.target).is('.bookaviewing')) 
    { 
     bookingform.slideUp(); 
    } 
}); 

Примечание: Я изменил щелчок снаружи, от hide() до slideUp, а, как hide был немного резким.