Saya memiliki menu tarik-turun Bootstrap Twitter. Seperti yang diketahui semua pengguna Twitter Bootstrap, menu dropdown ditutup saat klik (bahkan mengklik di dalamnya).
Untuk menghindari ini, saya dapat dengan mudah melampirkan pengendali event klik pada menu dropdown dan cukup menambahkan yang terkenal event.stopPropagation()
.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
Ini terlihat mudah dan merupakan perilaku yang sangat umum, dan karena carousel-controls
(dan juga carousel indicators
) penangan event didelegasikan ke document
objek, click
peristiwa pada elemen-elemen ini ( kontrol selanjutnya , ...) akan "diabaikan".
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
Mengandalkan dropdown hide
/ hidden
acara Bootstrap Twitter bukanlah solusi karena alasan berikut:
- Objek acara yang disediakan untuk kedua penangan acara tidak memberikan referensi ke elemen yang diklik
- Saya tidak memiliki kontrol atas konten menu dropdown sehingga menambahkan
flag
kelas atau atribut tidak mungkin
Biola ini adalah perilaku normal dan biola ini event.stopPropagation()
ditambahkan.
Memperbarui
Terima kasih kepada Roman atas jawabannya . Saya juga menemukan jawaban yang dapat Anda temukan di bawah .
event propagation
telah dihentikan.Jawaban:
Menghapus atribut data
data-toggle="dropdown"
dan menerapkan buka / tutup dropdown dapat menjadi solusi.Pertama dengan menangani klik pada tautan untuk membuka / menutup dropdown seperti ini:
dan kemudian mendengarkan klik di luar dropdown untuk menutupnya seperti ini:
Ini adalah demo: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
sumber
// PREVENT INSIDE CLICK DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
e.stopPropagation()
adalah solusi terbaik.Ini akan membantu juga
sumber
'.dropdown-menu :not(.dropdown-item)'
sehingga mengklik padadropdown-item
tidak menutup popup, tetapi mengklik padadropdown-header
tidak.Bootstrap menyediakan fungsi berikut:
Oleh karena itu, menerapkan fungsi ini harus dapat menonaktifkan dropdown dari penutupan.
sumber
target
properti acara adalahli.dropdown
,relatedTarget
ini adalaha.dropdown-toggle
. Jadi Anda tidak bisa merujuk ke elemen yang diklik di dalamhide
pengendali event.target.hasClass(".keepopen")
seharusnyatarget.hasClass("keepopen")
. Kalau tidak, kodenya tidak akan berfungsi.Jawaban terbaik mutlak adalah menempatkan tag formulir setelah menu dropdown kelas
jadi kodemu
sumber
<li>
elemen tidak boleh berada di dalam sebuah<form>
elemen.Saya juga menemukan solusinya.
Dengan asumsi bahwa
Twitter Bootstrap Components
penangan peristiwa terkait didelegasikan kedocument
objek, saya melingkar penangan terlampir dan memeriksa apakah elemen yang diklik saat ini (atau salah satu dari orang tuanya) prihatin dengan peristiwa yang didelegasikan.Semoga ini membantu siapa pun yang mencari solusi serupa.
Terima kasih atas bantuannya.
sumber
Ini mungkin membantu:
sumber
Ini dapat bekerja untuk kondisi apa pun.
sumber
jQuery:
HTML:
Demo :
Umum: https://jsfiddle.net/kerryjohnson/omefq68b/1/
Demo Anda dengan solusi ini: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/
sumber
Saya mencoba hal sederhana ini dan berhasil seperti pesona.
Saya mengubah elemen menu dropdown dari
<div>
ke<form>
dan itu bekerja dengan baik.sumber
Aku punya masalah yang sama baru-baru ini dan mencoba berbagai cara untuk mengatasinya dengan menghapus data atribut
data-toggle="dropdown"
dan mendengarkanclick
denganevent.stopPropagation()
menelepon.Cara kedua terlihat lebih disukai. Pengembang Bootstrap juga menggunakan cara ini. Di file sumber saya menemukan inisialisasi elemen dropdown:
Jadi, baris ini:
menyarankan Anda dapat meletakkan
form
elemen di dalam wadah dengan kelas.dropdown
untuk menghindari penutupan menu dropdown.sumber
Bootstrap telah memecahkan masalah ini sendiri dengan dukungan mereka untuk
<form>
tag dalam dropdown. Solusi mereka cukup dapat dipahami dan Anda dapat membacanya di sini: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.jsItu bermuara untuk mencegah propagasi pada elemen dokumen dan melakukannya hanya untuk acara bertipe
'click.bs.dropdown.data-api'
yang cocok dengan pemilih'.dropdown .your-custom-class-for-keep-open-on-click-elements'
.Atau dalam kode
sumber
form
pendekatan dari contoh tidak bekerja untuk Anda - saya menggunakan kelasdropleft
, tetapi juga perludropdown
agar pemilih formulir cocok.Saya memodifikasi jawaban @ Vartan agar berfungsi dengan Bootstrap 4.3. Solusinya tidak berfungsi lagi dengan versi terbaru karena
target
properti selalu mengembalikan root dropdowndiv
mana pun klik ditempatkan.Ini kodenya:
sumber
$('.dropdown-keep-open').on('hide.bs.dropdown', ev => !(ev.clickEvent && $(ev.target).has(ev.clickEvent.target).length))
return !target.closest('.dropdown-keep-open').length)
. Yang mengatakan, ini adalah solusi hebat! Menemukan ini diperlukan untuk menyelesaikan masalah ini.sumber
Saya telah memperbaruinya sekali lagi untuk menjadi yang paling cerdas dan fungsional mungkin. sekarang tutup ketika Anda membawa di luar nav, tetap terbuka saat Anda berada di dalamnya. sempurna.
sumber
show
, dropdown tidak menutup klik di luar, dan kita perlu mengklik pada dropdown-toggle sebelum ... +1 tetapbody
klik event ^^$('body').on('click', function (e) {
Seperti misalnya Bootstrap 4 Alpha memiliki Peristiwa Menu ini. Kenapa tidak digunakan?
sumber
e.preventDefault();
memblokir tautan, Anda dapat melewatinyaAnda dapat menghentikan klik pada dropdown dari menyebarkan dan kemudian secara manual menerapkan kembali kontrol carousel menggunakan metode javascript carousel .
Ini jsfiddle .
sumber
Dengan Angular2 Bootstrap, Anda dapat menggunakan nonInput untuk sebagian besar skenario:
https://valor-software.com/ng2-bootstrap/#/dropdowns
sumber
Saya tahu pertanyaan ini khusus untuk jQuery, tetapi bagi siapa pun yang menggunakan AngularJS yang memiliki masalah ini, Anda dapat membuat arahan yang menangani ini:
Kemudian tambahkan saja atribut
dropdown-prevent-close
ke elemen Anda yang memicu menu untuk menutup, dan itu harus mencegahnya. Bagi saya, itu adalahselect
elemen yang secara otomatis menutup menu:sumber
<div class="dropdown-menu" ng-click="$event.stopPropagation()">
bekerja untuk saya di 1.2.x[Bootstrap 4 Alpha 6] [Rails] Untuk rel pengembang,
e.stopPropagation()
akan menyebabkan perilaku yang tidak diinginkan untuklink_to
dengandata-method
tidak sama untukget
karena akan dengan kembali default semua permintaan Anda sebagaiget
.Untuk mengatasi masalah ini, saya sarankan solusi ini, yang bersifat universal
Tampilkan cuplikan kode
sumber
Alih-alih menulis beberapa kode javascript atau jquery (menciptakan kembali roda). Skenario di atas dapat dikelola dengan opsi tutup otomatis bootstrap. Anda dapat memberikan salah satu nilai untuk ditutup secara otomatis :
always - (Default) secara otomatis menutup dropdown ketika salah satu elemennya diklik.
outsideClick - menutup dropdown secara otomatis hanya ketika pengguna mengklik elemen apa pun di luar dropdown.
dinonaktifkan - menonaktifkan penutupan otomatis
Lihatlah plunkr berikut:
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
Set
Semoga ini membantu :)
sumber
ui-bootstrap
, yang mungkin tidak berlaku untuk banyak orang yang melihat pertanyaan ini.uib-dropdown auto-close="outsideClick"
. Menu tutup klik di dalam hanya sedikit ketidaknyamanan tetapi menu tidak tutup pada klik di luar cukup menjengkelkan.Saya tahu sudah ada jawaban sebelumnya yang menyarankan untuk menggunakan formulir tetapi markup yang diberikan tidak benar / ideal. Inilah solusi termudah, tidak perlu javascript sama sekali dan tidak merusak dropdown Anda. Bekerja dengan Bootstrap 4.
<form class="dropdown-item"> <!-- Your elements go here --> </form>
sumber
Ini membantu saya,
Elemen menu tarik turun Anda harus seperti ini, (catat kelas
dropdown-menu
dankeepopen
.Kode di atas mencegah pengunduhan pada keseluruhan
<body>
, sebagai gantinya ke elemen specfic dengan kelasdropdown-menu
.Semoga ini bisa membantu seseorang.
Terima kasih.
sumber
Solusi kerja paling sederhana bagi saya adalah:
keep-open
kelas ke elemen yang seharusnya tidak menyebabkan penutupan dropdownsumber
Saya tidak menemukan satu pun solusi yang berfungsi karena saya ingin menggunakan nav bootstrap default. Ini solusi saya untuk masalah ini:
sumber
Dalam
.dropdown
konten, letakkan.keep-open
kelas pada label seperti ini:Kasus-kasus sebelumnya menghindari peristiwa yang berkaitan dengan objek kontainer, sekarang wadah mewarisi kelas tetap terbuka dan periksa sebelum ditutup.
sumber
Saya melakukannya dengan ini:
sumber
sumber
Untuk menutup dropdown hanya jika acara klik dipicu di luar dropdown bootstrap, inilah yang bekerja untuk saya:
File JS:
File HTML:
sumber
Anda mungkin memiliki beberapa masalah jika Anda menggunakan metode return false atau stopPropagation () karena acara Anda akan terputus. Coba kode ini, ini berfungsi dengan baik:
Dalam HTML:
Jika Anda ingin menutup dropdrown:
sumber
Di Bootstrap 4 Anda juga dapat melakukan ini:
di mana
#dd-link
elemen jangkar atau tombol yang memilikidata-toggle="drowndown"
properti.sumber