Остановить только одно раскрывающееся меню для переключения

У меня есть раскрывающийся список кнопок (только один, а не все), и внутри него я хочу иметь несколько полей ввода, где люди могут вводить материал внутри без выпадающего списка, как только вы нажимаете на него (но это закрывается, если вы щелкаете за его пределами).

Я создал 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, но я не мог понять это.

Спасибо за любую помощь.

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что плагин jQuery с раскрывающимся списком расширения закрывает сброшенное меню, когда вы нажимаете в другом месте. Вы можете отключить это поведение, запустив события кликов в своем элементе выпадающего меню и не позволяя ему добраться до слушателей событий кликов в элементе body.

Просто добавьте

$('.dropdown-menu').click(function(event){
     event.stopPropagation();
 });​

jsfiddle можно найти здесь

Ответ 2

Я знаю, что этот вопрос не для Angular как таковой, но для тех, кто использует Angular, вы можете передать событие из HTML и прекратить распространение через $event:

<div ng-click="$event.stopPropagation();">
    <span>Content example</span>
</div>

Ответ 3

На самом деле, если бы вы были в 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(...
...

Ответ 4

Еще одно быстрое решение, просто добавьте атрибут onclick к div, имеющему класс dropdown-menu:

<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>

Ответ 5

Попробовав много методов, я обнаружил, что лучший из них, который не вызывает никаких недостатков, который даже прост:

$(document)
.on( 'click', '.dropdown-menu', function (e){
    e.stopPropagation();
});

Это позволяет вам также выполнять привязку к внутренним элементам внутри выпадающих меню.

Ответ 6

также запретить клик, если не щелкнуть элемент кнопки

$('.dropdown-menu').click(function(e) {
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});

Ответ 7

У меня была эта проблема, но в компоненте реакции - компонент реакции находился в выпадающем меню начальной загрузки с формой. Каждый раз, когда элемент внутри раскрывающегося списка был нажат, он закрывался, что вызывало проблемы с вводом чего-либо в форму.

Обычные e.preventDefault() и e.stopPropagation() не будут работать в приложении-клиенте из-за немедленного запуска jquery-события и последующего вмешательства после вмешательства.

Следующий код позволил мне исправить мою проблему.

stopPropagation: function(e){
    e.nativeEvent.stopImmediatePropagation();
}

или в формате ES6

stopPropagation(e){
    e.nativeEvent.stopImmediatePropagation();
}

Надеюсь, что это может быть полезно любому, кто борется с другими ответами при попытке использовать его в реакции.