У меня есть выпадающее меню Twitter Bootstrap. Как известно всем пользователям Twitter Bootstrap, раскрывающееся меню закрывается при щелчке (даже при щелчке внутри него).
Чтобы избежать этого, я могу легко добавить обработчик события щелчка в выпадающем меню и просто добавить известное 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>
Однако это выглядит просто и очень распространено, и поскольку carousel-controls
(а также carousel indicators
) обработчики событий делегируются document
объекту, click
событие в этих элементах ( prev / next control, ...) будет «игнорироваться».
$('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();
});
Опора на Twitter Bootstrap dropdown hide
/ hidden
events не является решением по следующим причинам:
- Предоставленный объект события для обоих обработчиков событий не дает ссылку на выбранный элемент
- У меня нет контроля над содержимым выпадающего меню, поэтому добавить
flag
класс или атрибут невозможно
Эта скрипка является нормальным поведением, и эта скрипка с event.stopPropagation()
добавленным.
Обновить
Спасибо Роману за ответ . Я также нашел ответ, который вы можете найти ниже .
event propagation
была остановлена.Ответы:
Удаление атрибута данных
data-toggle="dropdown"
и реализация открытия / закрытия раскрывающегося списка может быть решением.Сначала, нажав на ссылку, откройте / закройте раскрывающийся список следующим образом:
и затем прослушивание щелчков за пределами раскрывающегося списка, чтобы закрыть его следующим образом:
Вот демо: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
источник
// PREVENT INSIDE CLICK DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
e.stopPropagation()
это лучшее решение.Это также должно помочь
источник
'.dropdown-menu :not(.dropdown-item)'
того, чтобы щелкнуть наdropdown-item
закрывает всплывающее окно, но нажатие наdropdown-header
нет.Bootstrap предоставляет следующую функцию:
Следовательно, реализация этой функции должна иметь возможность отключить раскрывающийся список от закрытия.
источник
target
свойство события естьli.dropdown
, этоrelatedTarget
естьa.dropdown-toggle
. Таким образом, вы не можете ссылаться на выбранный элемент вhide
обработчике событий.target.hasClass(".keepopen")
должно бытьtarget.hasClass("keepopen")
. В противном случае код не будет работать.Абсолютно лучший ответ - поставить тег формы после выпадающего меню класса.
так твой код
источник
<li>
элемент не должен быть внутри<form>
элемента.Я также нашел решение.
Предполагая, что
Twitter Bootstrap Components
связанные обработчики событий делегированыdocument
объекту, я зацикливаю подключенные обработчики и проверяю, связан ли текущий выбранный элемент (или один из его родителей) с делегированным событием.Надеюсь, это поможет любому, кто ищет подобное решение.
Спасибо за вашу помощь.
источник
Это может помочь:
источник
Это может работать для любых условий.
источник
JQuery:
HTML:
Демо :
Общий: https://jsfiddle.net/kerryjohnson/omefq68b/1/
Ваша демонстрация с этим решением: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/
источник
Я попробовал эту простую вещь, и она работала как шарм.
Я изменил элемент выпадающего меню с
<div>
на,<form>
и он работал хорошо.источник
У меня аналогичная проблема , в последнее время и пробовали разные способы ее решения с удалением атрибута данных
data-toggle="dropdown"
и прослушиванияclick
сevent.stopPropagation()
вызовом.Второй способ выглядит более предпочтительным. Также разработчики Bootstrap используют этот способ. В исходном файле я нашел инициализацию выпадающих элементов:
Итак, эта строка:
предполагает, что вы можете поместить
form
элемент внутри контейнера с классом,.dropdown
чтобы избежать закрытия выпадающего меню.источник
Bootstrap решил эту проблему самостоятельно, поддерживая
<form>
теги в выпадающих списках. Их решение вполне приемлемо, и вы можете прочитать его здесь: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.jsЭто сводится к предотвращению распространения в элементе документа и делает это только для событий типа,
'click.bs.dropdown.data-api'
которые соответствуют селектору'.dropdown .your-custom-class-for-keep-open-on-click-elements'
.Или в коде
источник
form
подход из примеров не работает для вас - я использовал классdropleft
, но он также необходимdropdown
для соответствия селектора формы.Я изменил ответ @ Vartan, чтобы он работал с Bootstrap 4.3. Его решение больше не работает с последней версией, поскольку
target
свойство всегда возвращает корень выпадающегоdiv
меню независимо от того, где был размещен щелчок.Вот код:
источник
$('.dropdown-keep-open').on('hide.bs.dropdown', ev => !(ev.clickEvent && $(ev.target).has(ev.clickEvent.target).length))
return !target.closest('.dropdown-keep-open').length)
. Тем не менее, это отличное решение! Нашел это необходимое для решения этой проблемы.источник
я обновил его еще раз, чтобы быть самым умным и функциональным, насколько это возможно. теперь он закрывается, когда вы парите за пределами навигации, оставаясь открытым, пока вы находитесь внутри него. просто идеально.
источник
show
раскрывающийся список не закрывается при щелчке снаружи, и нам нужно нажать на раскрывающееся-переключение до ... +1 в любом случаеbody
событие клика ^^$('body').on('click', function (e) {
Как, например, Bootstrap 4 Alpha имеет это событие меню. Почему бы не использовать?
источник
e.preventDefault();
блокирует ссылки, вы можете пропустить этоВы можете остановить распространение щелчка по раскрывающемуся списку, а затем вручную переопределить элементы управления каруселью, используя методы карусельного javascript .
Вот jsfiddle .
источник
С Angular2 Bootstrap вы можете использовать nonInput для большинства сценариев:
https://valor-software.com/ng2-bootstrap/#/dropdowns
источник
Я знаю, что этот вопрос был специально для jQuery, но для любого, кто использует AngularJS, у которого есть эта проблема, вы можете создать директиву, которая обрабатывает это:
Затем просто добавьте атрибут
dropdown-prevent-close
к вашему элементу, который вызывает закрытие меню, и это должно предотвратить его. Для меня это былselect
элемент, который автоматически закрывал меню:источник
<div class="dropdown-menu" ng-click="$event.stopPropagation()">
у меня работает в 1.2.x[Bootstrap 4 Альфа 6] [Rails] Для рельсов проявитель,
e.stopPropagation()
приведет к нежелательному поведению дляlink_to
сdata-method
не составит ,get
так как он будет по возвращении по умолчанию все ваш запрос , какget
.Чтобы исправить эту проблему, я предлагаю это решение, которое является универсальным
Показать фрагмент кода
источник
Вместо того, чтобы писать некоторый код JavaScript или jquery (заново изобретать колесо). Приведенный выше сценарий может управляться параметром автозапуска начальной загрузки. Вы можете предоставить любое из значений для автоматического закрытия :
всегда - (по умолчанию) автоматически закрывает раскрывающийся список при нажатии любого из его элементов.
outsideClick - автоматически закрывает раскрывающийся список, только когда пользователь щелкает любой элемент вне раскрывающегося списка.
отключено - отключение автоматического закрытия
Взгляните на следующий планер:
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
Устанавливать
Надеюсь это поможет :)
источник
ui-bootstrap
, которые используют , что, вероятно, не так для очень многих людей, просматривающих этот вопрос.uib-dropdown auto-close="outsideClick"
. Закрытие меню при щелчке внутри - это просто небольшой дискомфорт, но не закрытие меню при щелчке снаружи - очень огорчаетЯ знаю, что уже есть предыдущий ответ, предлагающий использовать форму, но предоставленная разметка не является правильной / идеальной. Вот самое простое решение, никакой JavaScript не нужен, и он не сломает ваш выпадающий список. Работает с Bootstrap 4.
<form class="dropdown-item"> <!-- Your elements go here --> </form>
источник
Это помогло мне,
Ваш выпадающий элемент меню должен быть таким (обратите внимание на классы
dropdown-menu
иkeepopen
.Приведенный выше код предотвращает связывание в целом
<body>
, вместо специфического элемента с классомdropdown-menu
.Надеюсь, это кому-нибудь поможет.
Спасибо.
источник
Самое простое рабочее решение для меня:
keep-open
класса к элементам, которые не должны вызывать закрытие раскрывающегося спискаисточник
Я обнаружил, что ни одно из решений не работает так, как мне хотелось бы, используя загрузочную навигацию по умолчанию. Вот мое решение этой проблемы:
источник
По
.dropdown
содержанию поместите.keep-open
класс на любой ярлык примерно так:В предыдущих случаях избегались события, связанные с объектами контейнера, теперь контейнер наследует класс keep-open и проверку перед закрытием.
источник
Я сделал это с этим:
источник
источник
Для закрытия выпадающего списка только в том случае, если событие клика было вызвано вне выпадающего списка начальной загрузки, вот что мне помогло:
JS файл:
HTML-файл:
источник
У вас могут возникнуть проблемы, если вы используете метод return false или stopPropagation (), потому что ваши события будут прерваны. Попробуйте этот код, он работает нормально:
В HTML:
Если вы хотите закрыть dropdrown:
источник
В Bootstrap 4 вы также можете сделать это:
где
#dd-link
якорный элемент или кнопка, которая имеетdata-toggle="drowndown"
свойство.источник