masalah tombol kelas & mouseup jquery

Saya menggunakan 2 skrip, seperti yang ditunjukkan di bawah ini.

Skrip pertama yang terbuka adalah div ketika tombol diklik dengan kelas "bookaviewing".

Saya memerlukan div dengan kelas "formulir pemesanan" untuk ditutup ketika seseorang mengklik di luar div "formulir pemesanan" - skrip ke-2 melakukan ini.

Masalah saya adalah ketika Anda mengklik tombol lebih dari sekali (karena tombol tersebut berada di luar div "formulir pemesanan"), tombol tersebut tidak akan menutup "formulir pemesanan"... tombol tersebut terus terbuka.

Saya perlu menggabungkan 2 skrip di bawah ini & memerlukan bantuan.

Skrip 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>

Skrip 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 sumber
comment
Jika skrip1 Anda hanya memberikan masalah, maka hanya posting skrip1, Bukan 2   -  person Pratik    schedule 03.11.2014
comment
Saya memposting keduanya karena menurut saya keduanya perlu digabungkan. Keduanya bekerja secara individual, tetapi tidak bersama-sama - karena tombol tidak akan menutup div.   -  person user3544484    schedule 03.11.2014
comment
Harap berikan contoh HTML Anda juga. Membuat demo tiruan jadi lebih cepat.   -  person Gone Coding    schedule 03.11.2014
comment
Berfungsi dengan Luar Biasa jsfiddle.net/ta0pdxkj Apa masalahnya?   -  person Pratik    schedule 03.11.2014
comment
@jQuery Angry Bird: slideToggle harus... tunggu dulu... toggle slide :) Contoh Anda tidak menutup saat Anda menekan clk lagi.   -  person Gone Coding    schedule 03.11.2014
comment
lihat di sini - jsfiddle - jsfiddle.net/philiplocke/Lztfrzta   -  person user3544484    schedule 03.11.2014
comment
nonaktifkan tombol untuk sementara waktu   -  person Lukas    schedule 03.11.2014

Jawaban (1)


arrow_upward
3
arrow_downward

Anda harus mengecualikan formulir pemesanan dan tombol sakelar, untuk menghindari tombol buka/tutup secara bersamaan:

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

Catatan: Saya juga mengubah klik di luar, dari hide() menjadi slideUp, karena hide agak mengganggu.

person Gone Coding    schedule 03.11.2014
comment
Anda adalah True Blue Aussie :) +1 - person Pratik; 03.11.2014