ปัญหาปุ่มสลับคลาสและเมาส์ของ jquery

ฉันใช้ 2 สคริปต์ดังที่แสดงด้านล่าง

สคริปต์แรกเปิดเป็น div เมื่อมีการคลิกปุ่มที่มีคลาส "bookaviewing"

ฉันต้องการ div ที่มีคลาส "แบบฟอร์มการจอง" เพื่อปิดเมื่อมีคนคลิกอยู่นอก div "แบบฟอร์มการจอง" - สคริปต์ที่ 2 ทำเช่นนี้

ปัญหาของฉันคือเมื่อคุณคลิกปุ่มมากกว่าหนึ่งครั้ง (เนื่องจากปุ่มอยู่นอก 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>

javascript toggle jquery mouseup
person user3544484    schedule 03.11.2014    source แหล่งที่มา
comment
หาก script1 ของคุณให้ปัญหาเท่านั้น ให้โพสต์เฉพาะ script1 ไม่ใช่ 2   -  person Pratik    schedule 03.11.2014
comment
ฉันโพสต์ทั้งสองรายการเนื่องจากฉันคิดว่าจำเป็นต้องรวมกัน ทั้งสองทำงานแยกกัน แต่ไม่ได้ทำงานร่วมกัน เนื่องจากปุ่มจะไม่ปิด div   -  person user3544484    schedule 03.11.2014
comment
โปรดระบุตัวอย่าง HTML ของคุณด้วย ทำให้การเยาะเย้ยการสาธิตเร็วขึ้นมาก   -  person Gone Coding    schedule 03.11.2014
comment
มันใช้งานได้ดีมาก jsfiddle.net/ta0pdxkj มีปัญหาอะไร   -  person Pratik    schedule 03.11.2014
comment
@jQuery Angry Bird: slideToggle ควร... รอก่อน... toggle the slide :) ตัวอย่างของคุณไม่ปิดเมื่อคุณกด clk อีกครั้ง   -  person Gone Coding    schedule 03.11.2014
comment
ลองดูที่นี่ - jsfiddle - jsfiddle.net/philiplocke/Lztfrzta   -  person user3544484    schedule 03.11.2014
comment
ปุ่มปิดการใช้งานชั่วขณะหนึ่ง   -  person Lukas    schedule 03.11.2014

คำตอบ (1)


arrow_upward
3
arrow_downward

คุณต้องยกเว้นแบบฟอร์มการจอง และ ปุ่มสลับ เพื่อหลีกเลี่ยงการสลับเปิด/ปิดในเวลาเดียวกัน:

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 ค่อนข้างจะสั่นคลอน

person Gone Coding    schedule 03.11.2014
comment
คุณคือ True Blue Aussie :) +1 - person Pratik; 03.11.2014