Tengo un botón desplegable (sólo uno, no todos ellos), y dentro de ella, quiero tener varias campo de entrada donde la gente puede escribir cosas en el interior sin el desplegable ocultar tan pronto como usted haga clic en él (pero se cierra si hace clic fuera de ella).

He creado un jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/

Y aquí está el código, es básico:

<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>​

Así que, básicamente, la quiero para no cerrar en el clic de la lista desplegable (pero cerrar haga clic en el botón de acción o fuera de la lista desplegable). Mi mejor conjetura fue hasta ahora para agregar una clase a la misma y tratar de hacer algo de JS, pero no pude averiguar.

Gracias por la ayuda.

InformationsquelleAutor denislexic | 2012-07-23

7 Comentarios

  1. 111

    El problema es que el boostrap desplegable jQuery plugin cierra la descendido un menú al hacer clic en cualquier otro lugar. Puede deshabilitar este comportamiento, la captura de los eventos de clic en el desplegable del menú elemento y el mantenimiento de llegar al evento click de los oyentes en el elemento de cuerpo.

    Acaba de agregar

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

    jsfiddle se puede encontrar aquí

    • Increíble, he ajustado un poco porque sólo necesito un poco de listas desplegables para no hacer el normal comportamiento, mediante la adición de una clase, y la comprobación de que en el código…ver violín, si está interesado. jsfiddle.net/denislexic/8afrw/8
    • También puede bloquear los clics en una clase específica, por lo que dejar en paz a la normal de las listas desplegables. js de violín aquí
    • ja, sí, que es mucho más fácil, gracias.
    • Esta es una buena respuesta. Usado, pero se topó con un problema. Para aquellos con un poco de tiempo extra en sus manos, podría ser interesante leer este artículo: css-tricks.com/dangers-stopping-event-propagation
    • Mejor respuesta si usted quiere controlar los eventos de clic en los niños en la lista desplegable stackoverflow.com/questions/25089297/…
    • Si desea desactivar todos los auto de cierre de la lista desplegable puede simplemente desactivar el oyente. $(‘html’).off(‘haga clic en.desplegable’)
    • El jsfiddel ya no funciona.
    • pero mi href tiene #archor, ¿Cómo puedo evitar que se añade a la url?

  2. 39

    Sé que esta pregunta no es para Angular de por sí, pero para cualquier persona que utiliza Angular puede pasar el evento desde el HTML y detener la propagación a través de $evento:

    <div ng-click="$event.stopPropagation();">
        <span>Content example</span>
    </div>
    • el parlamento, la gran respuesta! Me pregunto cómo puede coger el hace clic fuera del menú…
    • Eres un salvavidas. Un millón de gracias.
  3. 5

    De hecho, si usted estuviera en Angular.js sería más elegante para hacer una directiva para que:

    app.directive('stopClickPropagation', function() {
        return {
            restrict: 'A',
            link: function(scope, element) {
                element.click(function(e) {
                    e.stopPropagation();
                });
            }
        };
    });

    Y, a continuación, en la lista desplegable del menú, añadir la directiva:

    <div class="dropdown-menu" stop-click-propagation> 
        my dropdown content...
    <div>

    Especialmente si desea detener la propagación de múltiples eventos de ratón:

    ...
    element.click(function(e) {
        e.stopPropagation();
    });
    
    element.mousedown(...
    element.mouseup(...
    ...
  4. 5

    Otra solución rápida, sólo tiene que añadir onclick atributo div tener clase dropdown-menu:

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

    Después de probar un montón de técnicas que he descubierto que la mejor forma de usar, que no causa inconvenientes que incluso es simple:

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

    Que le permite también hacer algunos viven de unión para elementos internos dentro de las listas desplegables.

    • la mejor solución para mí
  6. 0

    también, evitar a menos que haga clic en haga clic en un elemento de botón

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

    Tuve este problema, pero en reaccionar componente – el reaccionar componente fue en un arranque menú desplegable con un formulario. Cada vez que un elemento dentro de la lista desplegable que se ha hecho clic iba a cerrar, causando problemas de introducir nada en el formulario.

    La costumbre e.preventDefault() y e.stopPropagation() no iba a funcionar en el reaccionar de la aplicación debido a los eventos de jquery de ser despedido de inmediato y reaccionar tratando de intervenir después de esto.

    El código de abajo, me permitió solucionar mi problema.

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

    o en ES6 formato

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

    Espero que esto pueda ser de utilidad a alguien luchando con las otras respuestas cuando se trata de utilizarla en reaccionar.

Dejar respuesta

Please enter your comment!
Please enter your name here