У меня есть раскрывающийся список кнопок (только один, а не все), и внутри него я хочу иметь несколько полей ввода, где люди могут вводить материал внутри без выпадающего списка, как только вы нажимаете на него (но это закрывается, если вы щелкаете за его пределами).
Я создал jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/
И вот код, он базовый:
<div class="btn-group" style="margin-left:20px;">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li>Email<input type="text" place-holder="Type here" /></li>
<li>Password<input type="text" place-holder="Type here" /></li>
</ul>
</div>
Итак, в основном, я хочу, чтобы он не закрывался при щелчке раскрывающегося списка (но закрывался щелчком кнопки действия или за пределами раскрывающегося списка). До сих пор я догадывался добавить класс к нему и попытаться сделать несколько JS, но я не мог понять это.
Спасибо за любую помощь.
Проблема заключается в том, что плагин jQuery с раскрывающимся списком расширения закрывает сброшенное меню, когда вы нажимаете в другом месте. Вы можете отключить это поведение, запустив события кликов в своем элементе выпадающего меню и не позволяя ему добраться до слушателей событий кликов в элементе body.
Просто добавьте
$('.dropdown-menu').click(function(event){
event.stopPropagation();
});
jsfiddle можно найти здесь
Я знаю, что этот вопрос не для Angular как таковой, но для тех, кто использует Angular, вы можете передать событие из HTML и прекратить распространение через $event:
<div ng-click="$event.stopPropagation();">
<span>Content example</span>
</div>
На самом деле, если бы вы были в Angular.js, было бы более элегантно сделать для него директиву:
app.directive('stopClickPropagation', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.click(function(e) {
e.stopPropagation();
});
}
};
});
И затем в раскрывающемся меню добавьте директиву:
<div class="dropdown-menu" stop-click-propagation>
my dropdown content...
<div>
Особенно, если вы хотите прекратить распространение для нескольких событий мыши:
...
element.click(function(e) {
e.stopPropagation();
});
element.mousedown(...
element.mouseup(...
...
Еще одно быстрое решение, просто добавьте атрибут onclick к div, имеющему класс dropdown-menu:
<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>
Попробовав много методов, я обнаружил, что лучший из них, который не вызывает никаких недостатков, который даже прост:
$(document)
.on( 'click', '.dropdown-menu', function (e){
e.stopPropagation();
});
Это позволяет вам также выполнять привязку к внутренним элементам внутри выпадающих меню.
также запретить клик, если не щелкнуть элемент кнопки
$('.dropdown-menu').click(function(e) {
if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});
У меня была эта проблема, но в компоненте реакции - компонент реакции находился в выпадающем меню начальной загрузки с формой. Каждый раз, когда элемент внутри раскрывающегося списка был нажат, он закрывался, что вызывало проблемы с вводом чего-либо в форму.
Обычные e.preventDefault() и e.stopPropagation() не будут работать в приложении-клиенте из-за немедленного запуска jquery-события и последующего вмешательства после вмешательства.
Следующий код позволил мне исправить мою проблему.
stopPropagation: function(e){
e.nativeEvent.stopImmediatePropagation();
}
или в формате ES6
stopPropagation(e){
e.nativeEvent.stopImmediatePropagation();
}
Надеюсь, что это может быть полезно любому, кто борется с другими ответами при попытке использовать его в реакции.