Interrompi un solo menu a discesa dalla chiusura al clic

Question

Ho un menu a discesa (solo uno, non tutti), e all'interno di esso, voglio avere diversi campi di input in cui le persone possono digitare roba all'interno senza il menu a cascata nascosto come appena fai clic su di esso (ma si chiude se fai clic all'esterno di esso).

ho creato un jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/

E qui è il codice, è fondamentale:

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

Quindi, fondamentalmente, voglio che si chiude al clic della discesa (ma vicino al clic di il pulsante di azione o al di fuori del menu a discesa). La mia ipotesi migliore è stata quella di aggiungere una classe e provare a fare qualche JS, ma non riuscivo a capirlo.

Grazie per qualsiasi aiuto.

Answer 1

Il problema è che il plugin dropdown di boostrap jQuery chiude il menu rilasciato quando si fa clic in qualsiasi altro punto. Puoi disabilitare questo comportamento catturando gli eventi click sul tuo menu a tendina e impedendogli di raggiungere i listener dell'evento click sull'elemento body.

Basta aggiungere

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

jsfiddle può essere trovato here

Answer 2

So che questa domanda non è per angolare per sé, ma per chiunque utilizzi angolare si può passare l'evento dal HTML e fermare la propagazione via $ evento:

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

Answer 3

Dopo aver provato un sacco di tecniche ho scoperto che la migliore da usare, che non provoca inconvenienti che è anche semplice:

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

che consente anche di fare alcuni vivono vincolante per gli elementi interni all'interno menù a discesa.

Answer 4

anche, evitare che cliccare a meno che non scatti un elemento pulsante

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

Answer 5

In realtà, se si fosse in Angular.js, sarebbe più elegante per fare una direttiva per esso:

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

E poi, sul menu a discesa menu, aggiungere la direttiva:

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

Specialmente se si vuole fermare la propagazione per multipl e gli eventi del mouse:

... 
element.click(function(e) { 
    e.stopPropagation(); 
}); 

element.mousedown(... 
element.mouseup(... 
... 

Answer 6

Un'altra soluzione rapida, basta aggiungere l'attributo onclick a div avere classe dropdown-menu:

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

Answer 7

ho avuto questo problema, ma in un reagiscono componente - l'reagiscono componente era in un menu a discesa di bootstrap menu con un modulo. Ogni volta che veniva fatto clic su un elemento all'interno del menu a discesa, questo si chiudeva, causando problemi nell'immissione di qualsiasi elemento nel modulo.

I soliti e.preventDefault() e e.stopPropagation() non funzionerebbero nell'app di reazione a causa dell'attivazione immediata dell'evento jquery e la reazione di tentativo di intervento dopo questo.

Il codice seguente mi ha permesso di risolvere il mio problema.

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

o in formato ES6

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

Spero che questo possa essere utile a tutti coloro che lottano con le altre risposte quando si cerca di usarlo in reagire.