Mam menu rozwijane Bootstrap na Twitterze. Jak wszyscy użytkownicy Twitter Bootstrap wiedzą, menu rozwijane zamyka się po kliknięciu (nawet kliknięciu w nim).
Aby tego uniknąć, mogę łatwo dołączyć moduł obsługi zdarzeń kliknięcia do menu rozwijanego i po prostu dodać słynny 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>
Wygląda to jednak na łatwe i bardzo powszechne zachowanie, a ponieważ carousel-controls
(jak również carousel indicators
) procedury obsługi zdarzeń są delegowane do document
obiektu, click
zdarzenie na tych elementach ( kontrolki poprzednia / następna , ...) zostanie „zignorowane”.
$('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();
});
Opieranie się na rozwijanym menu hide
/ hidden
zdarzeniach Bootstrap nie jest rozwiązaniem z następujących powodów:
- Podany obiekt zdarzenia dla obu procedur obsługi zdarzeń nie zawiera odniesienia do klikniętego elementu
- Nie mam kontroli nad zawartością menu rozwijanego, więc dodanie
flag
klasy lub atrybutu nie jest możliwe
To skrzypce jest normalne zachowanie i to skrzypce jest z event.stopPropagation()
dodaną.
Aktualizacja
Dzięki Romanowi za odpowiedź . Znalazłem również odpowiedź, którą możesz znaleźć poniżej .
event propagation
momentu zatrzymania.Odpowiedzi:
Usunięcie atrybutu danych
data-toggle="dropdown"
i wdrożenie otwarcia / zamknięcia menu rozwijanego może być rozwiązaniem.Po pierwsze, kliknij łącze, aby otworzyć / zamknąć menu w następujący sposób:
a następnie słuchanie kliknięć poza menu rozwijanym, aby je zamknąć w następujący sposób:
Oto demo: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
źródło
// PREVENT INSIDE CLICK DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
e.stopPropagation()
jest najlepszym rozwiązaniem.To również powinno pomóc
źródło
'.dropdown-menu :not(.dropdown-item)'
więc kliknięcie przycisku „a”dropdown-item
powoduje zamknięcie wyskakującego okienka, a kliknięcie przycisku „dropdown-header
nie”.Bootstrap zapewnia następującą funkcję:
Dlatego wdrożenie tej funkcji powinno umożliwić wyłączenie rozwijania z zamykania.
źródło
target
właściwość jestli.dropdown
TherelatedTarget
jesta.dropdown-toggle
. W związku z tym nie można odwoływać się do klikniętego elementu whide
module obsługi zdarzeń.target.hasClass(".keepopen")
powinno byćtarget.hasClass("keepopen")
. W przeciwnym razie kod nie będzie działał.Absolutnie najlepszą odpowiedzią jest umieszczenie znacznika formularza po menu rozwijanym klasy
więc twój kod to
źródło
<li>
element nie powinien znajdować się w<form>
elemencie.Znalazłem również rozwiązanie.
Zakładając, że
Twitter Bootstrap Components
powiązane funkcje obsługi zdarzeń są delegowane dodocument
obiektu, zapętlam dołączone procedury obsługi i sprawdzam, czy zdarzenie delegowane dotyczy bieżącego klikniętego elementu (lub jednego z jego elementów nadrzędnych).Mam nadzieję, że pomoże to każdemu, kto szuka podobnego rozwiązania.
Dziękuję wszystkim za pomoc.
źródło
To może pomóc:
źródło
Może to działać w każdych warunkach.
źródło
jQuery:
HTML:
Próbny :
Ogólne: https://jsfiddle.net/kerryjohnson/omefq68b/1/
Twoje demo z tym rozwiązaniem: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/
źródło
Próbowałem tej prostej rzeczy i zadziałało to jak urok.
Zmieniłem element menu rozwijanego z
<div>
na<form>
i działało to dobrze.źródło
Mam podobny problem niedawno i próbował różnych sposobów rozwiązania go z usuwaniem danych atrybutu
data-toggle="dropdown"
i słuchaniaclick
zeevent.stopPropagation()
wywołania.Drugi sposób wygląda lepiej. Korzystają z tego również programiści Bootstrap. W pliku źródłowym znalazłem inicjalizację elementów rozwijanych:
Więc ta linia:
sugeruje, że możesz umieścić
form
element w pojemniku z klasą,.dropdown
aby uniknąć zamykania menu rozwijanego.źródło
Bootstrap sam rozwiązał ten problem, obsługując
<form>
tagi w menu rozwijanych. Ich rozwiązanie jest całkiem zrozumiałe i możesz je przeczytać tutaj: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.jsSprowadza się to do zapobiegania propagacji w elemencie dokumentu i robi to tylko dla zdarzeń typu
'click.bs.dropdown.data-api'
pasujących do selektora'.dropdown .your-custom-class-for-keep-open-on-click-elements'
.Lub w kodzie
źródło
form
podejście z przykładów nie działa dla Ciebie - korzystałem z klasydropleft
, ale potrzebuje ona równieżdropdown
, aby selektor formularzy pasował.Zmodyfikowałem odpowiedź @ Vartan, aby działała z Bootstrap 4.3. Jego rozwiązanie nie działa już z najnowszą wersją, ponieważ
target
właściwość zawsze zwraca katalog główny rozwijanego menu,div
niezależnie od tego, gdzie kliknięto.Oto kod:
źródło
$('.dropdown-keep-open').on('hide.bs.dropdown', ev => !(ev.clickEvent && $(ev.target).has(ev.clickEvent.target).length))
return !target.closest('.dropdown-keep-open').length)
. To powiedziawszy, to świetne rozwiązanie! Znalazłem to potrzebne do rozwiązania tego problemu.źródło
Zaktualizowałem go jeszcze raz, aby był jak najmądrzejszy i najbardziej funkcjonalny. teraz zamyka się, gdy unosisz się poza nawigacją, pozostając otwartym, gdy jesteś w nim. po prostu perfekcyjny.
źródło
show
menu rozwijane nie zamyka się po kliknięciu na zewnątrz, a my musimy kliknąć przełącznik rozwijany przed ... W każdym razie +1body
zdarzeniu kliknięcia ^^$('body').on('click', function (e) {
Jak na przykład Bootstrap 4 Alpha ma to wydarzenie w menu. Dlaczego nie użyć?
źródło
e.preventDefault();
blokuje linki, możesz je pominąćMożesz zatrzymać kliknięcie menu rozwijanego w celu propagacji, a następnie ręcznie zaimplementować kontrolki karuzeli za pomocą metod javascript karuzeli .
Oto jsfiddle .
źródło
Dzięki Angular2 Bootstrap możesz używać nonInput w większości scenariuszy:
https://valor-software.com/ng2-bootstrap/#/dropdowns
źródło
Wiem, że to pytanie było specjalnie dla jQuery, ale dla każdego, kto używa AngularJS, który ma ten problem, możesz utworzyć dyrektywę, która to obsługuje:
Następnie po prostu dodaj atrybut
dropdown-prevent-close
do elementu, który powoduje zamknięcie menu, i powinno temu zapobiec. Dla mnie był toselect
element, który automatycznie zamykał menu:źródło
<div class="dropdown-menu" ng-click="$event.stopPropagation()">
pracuje dla mnie w 1.2.x[Bootstrap 4 Alpha 6] [Railsy] Dla deweloperów Railsów,
e.stopPropagation()
spowoduje to niepożądane zachowanielink_to
zdata-method
nie równą,get
ponieważ domyślnie zwróci wszystkie twoje żądania jakoget
.Aby rozwiązać ten problem, proponuję to uniwersalne rozwiązanie
Pokaż fragment kodu
źródło
Zamiast pisać kod javascript lub jquery (wymyślanie koła na nowo). Powyższym scenariuszem można zarządzać za pomocą opcji automatycznego zamykania bootstrap. Możesz podać jedną z wartości do automatycznego zamykania :
zawsze - (Domyślnie) automatycznie zamyka menu rozwijane po kliknięciu dowolnego z jego elementów.
outsideClick - automatycznie zamyka menu rozwijane tylko wtedy, gdy użytkownik kliknie dowolny element poza menu rozwijanym.
disabled - wyłącza automatyczne zamykanie
Spójrz na następujący plunkr:
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
Zestaw
Mam nadzieję że to pomoże :)
źródło
ui-bootstrap
, co prawdopodobnie nie dzieje się tak w przypadku bardzo wielu osób, które oglądają to pytanie.uib-dropdown auto-close="outsideClick"
. Menu zamykane po kliknięciu w środku jest tylko niewielką niedogodnością, ale menu nie zamykające się po kliknięciu na zewnątrz jest dość denerwujące.Wiem, że już istnieje poprzednia odpowiedź sugerująca użycie formularza, ale podany znacznik jest nieprawidłowy / idealny. Oto najprostsze rozwiązanie, w ogóle nie wymaga javascript i nie psuje listy rozwijanej. Działa z Bootstrap 4.
<form class="dropdown-item"> <!-- Your elements go here --> </form>
źródło
To pomogło mi
Twój rozwijany element menu musi wyglądać tak: (zwróć uwagę na klasy
dropdown-menu
ikeepopen
.Powyższy kod zapobiega wiązaniu całości
<body>
, zamiast do określonego elementu z klasądropdown-menu
.Mam nadzieję, że to komuś pomoże.
Dzięki.
źródło
Najprostszym działającym rozwiązaniem dla mnie jest:
keep-open
klasy do elementów, które nie powinny powodować zamykania rozwijanego menuźródło
Stwierdziłem, że żadne z rozwiązań nie działa tak, jak chciałbym używać domyślnej nawigacji bootstrap. Oto moje rozwiązanie tego problemu:
źródło
W
.dropdown
treści umieść.keep-open
klasę na dowolnej etykiecie, takiej jak:W poprzednich przypadkach unikano zdarzeń związanych z obiektami kontenera, teraz kontener dziedziczy klasę utrzymywania otwarcia i sprawdzania przed zamknięciem.
źródło
Zrobiłem to z tym:
źródło
źródło
Aby zamknąć menu rozwijane tylko wtedy, gdy zdarzenie kliknięcia zostało wywołane poza menu rozwijanym ładowania początkowego, działało to dla mnie:
Plik JS:
Plik HTML:
źródło
Możesz mieć pewne problemy, jeśli użyjesz metody return false lub stopPropagation (), ponieważ Twoje zdarzenia zostaną przerwane. Wypróbuj ten kod, działa dobrze:
W HTML:
Jeśli chcesz zamknąć okno rozwijane:
źródło
W Bootstrap 4 możesz również to zrobić:
gdzie
#dd-link
jest element lub przycisk kotwicy, który madata-toggle="drowndown"
właściwość.źródło