Masalah:

Saya mencoba menerapkan formulir tarik-turun dari sebuah tombol. Namun, saya mengalami masalah dengan formulir yang tidak tetap terlihat bahkan setelah kondisi terpenuhi. Saya baru mengenal javascript dan css, jadi bersabarlah jika ini kesalahan konyol. Terima kasih sebelumnya.


Apa yang ingin saya lakukan:

  1. Formulir akan disembunyikan secara default.
  2. Saat pengguna mengarahkan kursor ke tombol gambar, formulir akan ditampilkan dan disembunyikan setelah mouseleave.
  3. Jika pengguna mengklik tombol, maka formulir akan tetap terlihat sehingga pengguna dapat memasukkan data dan menjumlahkannya.

Pengamatan:

  1. Tujuan #1 dan #2 dari atas bekerja seperti yang diharapkan.
  2. Berlawanan dengan tujuan #3, formulir secara otomatis bersembunyi bahkan setelah tombol diklik.

Metode yang Tidak Berhasil:

  1. Menggunakan .show() sebagai ganti .css("display","block")
  2. Menggunakan form:hover untuk menyetel display:block.
  3. Menggunakan setTimeout(hide_function,500) akan menyembunyikan formulir setelah 500 md, terlepas dari klik tombolnya.

Kode:

Berikut tautan ke jsfiddle saya yang dapat Anda gunakan untuk mengujinya.


Referensi:

  1. Untuk deteksi klik tombol.
  2. Untuk mengubah properti tampilan.
0
Harshith Thota 16 Agustus 2017, 13:43

2 jawaban

Jawaban Terbaik

Saya telah memodifikasi sedikit kode Anda, silakan periksa dengan biola

$('#dropbtn').click(function() {
  $(this).data('clicked', 'yes');
  $('#loginForm').addClass('activate');
});

https://jsfiddle.net/d3h8gvek/7/

0
Jishnu V S 16 Agustus 2017, 11:32

Cukup ubah atribut data:

 $('#dropbtn').click(function() {
  $(this).data('clicked', 'yes');
  $('#loginForm').css('display', 'block');
});

https://jsfiddle.net/d3h8gvek/3/#run //hasil tetap

1
Alex 16 Agustus 2017, 10:58