jquery 토글 클래스 및 마우스 업 버튼 문제

Question

아래와 같이 2 개의 스크립트를 사용하고 있습니다.

"bookaviewing"클래스로 버튼을 클릭하면 첫 번째 스크립트 열기가 div로 표시됩니다.

"예약 양식"div의 바깥 쪽에서 누군가가 클릭을하면 "예약 양식"클래스가있는 div가 필요합니다. 두 번째 스크립트는이를 수행합니다.

내 문제는 버튼을 두 번 이상 클릭하면 ("예약 양식"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

당신은 같은에서 폐쇄/개방 토글을 방지하기 위해 예약 양식 및 토글 버튼을 제외해야 시간 :

(210)

// 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()에서, 외부 클릭을 변경했습니다.