Ho un menu a discesa Twitter Bootstrap. Come tutti gli utenti di Bootstrap di Twitter sanno, il menu a discesa si chiude al clic (anche facendo clic al suo interno).
Per evitarlo, posso facilmente collegare un gestore di eventi click nel menu a discesa e aggiungere semplicemente il famoso 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>
Questo sembra facile e un comportamento molto comune, tuttavia, e poiché carousel-controls
(così come carousel indicators
) i gestori di eventi sono delegati document
all'oggetto, l' click
evento su questi elementi ( controlli precedente / successivo , ...) sarà “ignorato”.
$('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();
});
Affidarsi al menu a discesa hide
/ hidden
eventi Bootstrap di Twitter non è una soluzione per i seguenti motivi:
- L'oggetto evento fornito per entrambi i gestori eventi non fa riferimento all'elemento cliccato
- Non ho il controllo sul contenuto del menu a discesa, quindi
flag
non è possibile aggiungere una classe o un attributo
Questo violino è il comportamento normale e questo violino è con l' event.stopPropagation()
aggiunta.
Aggiornare
Grazie a Roman per la sua risposta . Ho anche trovato una risposta che puoi trovare qui sotto .
event propagation
è stata interrotta.