blocks|key|330265|text|在Twitter+Bootstrap+is+not+implemented中，但是可以使用this+plugin|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|330266|更新1：|330267|Sames问题here|330268|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twitter/bootstrap/issues/983|1|https://github.com/CWSpear/twitter-bootstrap-hover-dropdown|2|https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click^0|J|I|0|19|B|1|0|0|7|4|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]|$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

In Twitter Bootstrap <a href="https://github.com/twitter/bootstrap/issues/983" rel="nofollow noreferrer">is not implemented</a> but you can use the <a href="https://github.com/CWSpear/twitter-bootstrap-hover-dropdown" rel="nofollow noreferrer">this plugin</a>

Update 1: 

Sames question <a href="https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click">here</a>

blocks|key|330277|text|最简单的解决方案是CSS。添加像这样的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330278|.dropdown:hover+.dropdown-menu+{
++++display:+block;
++++margin-top:+0;+//+remove+the+gap+so+it+doesn't+close
+}|code-block|syntax|javascript|330279|Working+Fiddle|offset|length|330280|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/brbcoding/tah2tur9/^0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

The easiest solution would be in CSS. Add something like...

<pre><code>.dropdown:hover .dropdown-menu {
 display: block;
 margin-top: 0; // remove the gap so it doesn't close
 }
</code></pre>

<a href="http://jsfiddle.net/brbcoding/tah2tur9/" rel="noreferrer">Working Fiddle</a>

blocks|key|112884|text|将鼠标悬停在导航项目上可查看它们在悬停时是否激活。http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|112885|entityMap|0|LINK|mutability|MUTABLE|url|http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#^0|P|1S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Hover over the nav items to see that they activate on hover.
<a href="http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#" rel="noreferrer">http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#</a>

blocks|key|330345|text|使用jQuery的一种简单方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330346|$(document).ready(function(){
++++$('ul.nav+li.dropdown').hover(function()+{
++++++$(this).find('.dropdown-menu').stop(true,+true).delay(200).fadeIn(200);
++++},+function()+{
++++++$(this).find('.dropdown-menu').stop(true,+true).delay(200).fadeOut(200);
++++});++
});|code-block|syntax|javascript|330347|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

An easy way, using jQuery, is this:



<pre><code>$(document).ready(function(){
 $('ul.nav li.dropdown').hover(function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
 }, function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
 }); 
});
</code></pre>

blocks|key|330385|text|您可以使用jQuery的悬停函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330386|您只需在鼠标进入时添加类open，并在鼠标离开下拉列表时删除该类。|offset|length|style|CODE|330387|下面是我的代码：|330388|$(function(){
++++$('.dropdown').hover(function()+{
++++++++$(this).addClass('open');
++++},
++++function()+{
++++++++$(this).removeClass('open');
++++});
});|code-block|syntax|javascript|330389|entityMap^0|0|C|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can use jQuery's hover function.

You just need to add the class <code>open</code> when the mouse enters and remove the class when the mouse leaves the dropdown.

Here's my code:

<pre><code>$(function(){
 $('.dropdown').hover(function() {
 $(this).addClass('open');
 },
 function() {
 $(this).removeClass('open');
 });
});
</code></pre>

blocks|key|330444|text|最好的方法就是用鼠标悬停来触发bootstraps+click事件。这样，它应该仍然保持对触摸设备的友好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330445|$('.dropdown').hover(function(){+
++$('.dropdown-toggle',+this).trigger('click');+
});|code-block|syntax|javascript|330446|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly 

<pre><code>$('.dropdown').hover(function(){ 
 $('.dropdown-toggle', this).trigger('click'); 
});
</code></pre>

blocks|key|113017|text|所以你有这样的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113018|<a+class="dropdown-toggle"+data-toggle="dropdown">Show+menu</a>

<ul+class="dropdown-menu"+role="menu">
++++<li>Link+1</li>
++++<li>Link+2</li>+
++++<li>Link+3</li>+++++++++++++++++++++++++++++++++++++++++++++
</ul>|code-block|syntax|javascript|113019|正常情况下，它在单击事件上工作，而您希望它在悬停事件上工作。这非常简单，只需使用以下javascript/jquery代码：|113020|$(document).ready(function+()+{
++++$('.dropdown-toggle').mouseover(function()+{
++++++++$('.dropdown-menu').show();
++++})

++++$('.dropdown-toggle').mouseout(function()+{
++++++++t+=+setTimeout(function()+{
++++++++++++$('.dropdown-menu').hide();
++++++++},+100);

++++++++$('.dropdown-menu').on('mouseenter',+function()+{
++++++++++++$('.dropdown-menu').show();
++++++++++++clearTimeout(t);
++++++++}).on('mouseleave',+function()+{
++++++++++++$('.dropdown-menu').hide();
++++++++})
++++})
})|113021|这非常有效，下面是解释:我们有一个按钮和一个菜单。当我们悬停按钮时，我们显示菜单，当我们鼠标离开按钮时，我们在100毫秒后隐藏菜单。如果您想知道我为什么要使用它，是因为您需要时间将光标从按钮拖动到菜单上。当你在菜单上时，时间被重置，你可以在那里停留你想要的时间。当您退出菜单时，我们将立即隐藏菜单，而不会超时。|113022|我已经在许多项目中使用过这个代码，如果你在使用它时遇到任何问题，请随时向我提问。|113023|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

So you have this code:

<pre><code>&lt;a class="dropdown-toggle" data-toggle="dropdown"&gt;Show menu&lt;/a&gt;

&lt;ul class="dropdown-menu" role="menu"&gt;
 &lt;li&gt;Link 1&lt;/li&gt;
 &lt;li&gt;Link 2&lt;/li&gt; 
 &lt;li&gt;Link 3&lt;/li&gt; 
&lt;/ul&gt;
</code></pre>

Normally it works on click event, and you want it work on hover event. This is very simple, just use this javascript/jquery code:

<pre><code>$(document).ready(function () {
 $('.dropdown-toggle').mouseover(function() {
 $('.dropdown-menu').show();
 })

 $('.dropdown-toggle').mouseout(function() {
 t = setTimeout(function() {
 $('.dropdown-menu').hide();
 }, 100);

 $('.dropdown-menu').on('mouseenter', function() {
 $('.dropdown-menu').show();
 clearTimeout(t);
 }).on('mouseleave', function() {
 $('.dropdown-menu').hide();
 })
 })
})
</code></pre>

This works very well and here is the explanation: we have a button, and a menu. When we hover the button we display the menu, and when we mouseout of the button we hide the menu after 100ms. If you wonder why i use that, is because you need time to drag the cursor from the button over the menu. When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.

I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.

blocks|key|330506|text|这是我用来使它在悬停时使用一些jQuery的下拉列表|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330507|$(document).ready(function+()+{
++++$('.navbar-default+.navbar-nav+>+li.dropdown').hover(function+()+{
++++++++$('ul.dropdown-menu',+this).stop(true,+true).slideDown('fast');
++++++++$(this).addClass('open');
++++},+function+()+{
++++++++$('ul.dropdown-menu',+this).stop(true,+true).slideUp('fast');
++++++++$(this).removeClass('open');
++++});
});|code-block|syntax|javascript|330508|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is what I use to make it dropdown on hover with some jQuery

<pre><code>$(document).ready(function () {
 $('.navbar-default .navbar-nav &gt; li.dropdown').hover(function () {
 $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
 $(this).addClass('open');
 }, function () {
 $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
 $(this).removeClass('open');
 });
});
</code></pre>

blocks|key|113084|text|这只在你不在移动设备上时悬停导航栏，因为我发现在移动设备上悬停导航效果不好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113085|++++$(+document+).ready(function()+{

++++$(+'ul.nav+li.dropdown'+).hover(function()+{
++++++++//+you+could+also+use+this+condition:+$(+window+).width()+>=+768
++++++++if+($('.navbar-toggle').css('display')+===+'none'+
++++++++++++&&+false+===+('ontouchstart'+in+document))+{

++++++++++++$(+'.dropdown-toggle',+this+).trigger(+'click'+);
++++++++}
++++},+function()+{
++++++++if+($('.navbar-toggle').css('display')+===+'none'
++++++++++++&&+false+===+('ontouchstart'+in+document))+{

++++++++++++$(+'.dropdown-toggle',+this+).trigger(+'click'+);
++++++++}
++++});

});|code-block|syntax|javascript|113086|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This only hovers the navbar when you are not on a mobile device, because I find that hovering the navigation does not work well on mobile divices:

<pre><code> $( document ).ready(function() {

 $( 'ul.nav li.dropdown' ).hover(function() {
 // you could also use this condition: $( window ).width() &gt;= 768
 if ($('.navbar-toggle').css('display') === 'none' 
 &amp;&amp; false === ('ontouchstart' in document)) {

 $( '.dropdown-toggle', this ).trigger( 'click' );
 }
 }, function() {
 if ($('.navbar-toggle').css('display') === 'none'
 &amp;&amp; false === ('ontouchstart' in document)) {

 $( '.dropdown-toggle', this ).trigger( 'click' );
 }
 });

});
</code></pre>

blocks|key|330553|text|我尝试了其他解决方案，我正在使用bootstrap+3，但下拉菜单关闭得太快，无法移动到它上面|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330554|假设您向li添加了class="dropdown“，我添加了一个超时|330555|var+hoverTimeout;
$('.dropdown').hover(function()+{
++++clearTimeout(hoverTimeout);
++++$(this).addClass('open');
},+function()+{
++++var+$self+=+$(this);
++++hoverTimeout+=+setTimeout(function()+{
++++++++$self.removeClass('open');
++++},+150);
});|code-block|syntax|javascript|330556|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I try other solutions, i'm using bootstrap 3, but dropdown menu closes too quickly to move over it

supposed that you add class="dropdown" to li, i added a timeout

<pre><code>var hoverTimeout;
$('.dropdown').hover(function() {
 clearTimeout(hoverTimeout);
 $(this).addClass('open');
}, function() {
 var $self = $(this);
 hoverTimeout = setTimeout(function() {
 $self.removeClass('open');
 }, 150);
});
</code></pre>

blocks|key|113108|text|对于CSS，当你也点击它的时候，它会变得疯狂。这是我正在使用的代码，它也没有改变移动视图的任何东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113109|$('.dropdown').mouseenter(function(){
++++if(!$('.navbar-toggle').is(':visible'))+{+//+disable+for+mobile+view
++++++++if(!$(this).hasClass('open'))+{+//+Keeps+it+open+when+hover+it+again
++++++++++++$('.dropdown-toggle',+this).trigger('click');
++++++++}
++++}
});|code-block|syntax|javascript|113110|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For CSS it goes crazy when you also click on it. This is the code that I'm using, it also don't change anything for mobile view.

<pre><code>$('.dropdown').mouseenter(function(){
 if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
 if(!$(this).hasClass('open')) { // Keeps it open when hover it again
 $('.dropdown-toggle', this).trigger('click');
 }
 }
});
</code></pre>

blocks|key|113114|text|++++$('.navbar+.dropdown').hover(function()+{
++++++$(this).find('.dropdown-menu').first().stop(true,+true).slideDown(150);
++++},+function()+{
++++++$(this).find('.dropdown-menu').first().stop(true,+true).slideUp(105)
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|113115|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> $('.navbar .dropdown').hover(function() {
 $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
 }, function() {
 $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
 });
</code></pre>

blocks|key|330599|text|使用hover触发click事件有一个小错误。如果为mouse-in，则click会产生相反的效果。It+opens+when+mouse-out和close+when+mouse-in。更好的解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|330600|$('.dropdown').hover(function()+{
++++if+(!($(this).hasClass('open')))+{
++++++++$('.dropdown-toggle',+this).trigger('click');
++++}
},+function()+{
++++if+($(this).hasClass('open'))+{
++++++++$('.dropdown-toggle',+this).trigger('click');
++++}
});|code-block|syntax|javascript|330601|entityMap^0|2|5|9|5|Q|8|10|5|1H|5|1S|9|22|5|2D|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$]]

Triggering a <code>click</code> event with a <code>hover</code> has a small error. If <code>mouse-in</code> and then a <code>click</code> creates vice-versa effect. It <code>opens</code> when <code>mouse-out</code> and <code>close</code> when <code>mouse-in</code>. A better solution:

<pre><code>$('.dropdown').hover(function() {
 if (!($(this).hasClass('open'))) {
 $('.dropdown-toggle', this).trigger('click');
 }
}, function() {
 if ($(this).hasClass('open')) {
 $('.dropdown-toggle', this).trigger('click');
 }
});
</code></pre>

blocks|key|113148|text|尝试使用带有fadein淡出动画的悬停功能|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113149|$('ul.nav+li.dropdown').hover(function()+{
++$(this).find('.dropdown-menu').stop(true,+true).delay(200).fadeIn(500);
},+function()+{
++$(this).find('.dropdown-menu').stop(true,+true).delay(200).fadeOut(500);
});|code-block|syntax|javascript|113150|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this using hover function with fadein fadeout animations

<pre><code>$('ul.nav li.dropdown').hover(function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
 $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</code></pre>

blocks|key|113155|text|html|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113156|++++++++<div+class="dropdown">

++++++++++++<button+class="btn+btn-primary+dropdown-toggle"+type="button"+data-toggle="dropdown">
++++++++++++++++Dropdown+Example+<span+class="caret">
++++++++++++</button>

++++++++++++<ul+class="dropdown-menu">
++++++++++++++++<li><a+href="#">HTML</a></li>
++++++++++++++++<li><a+href="#">CSS</a></li>
++++++++++++++++<li><a+href="#">JavaScript</a></li>
++++++++++++</ul>

++++++++</div>+|code-block|syntax|javascript|113157|jquery|113158|++++++++$(document).ready(+function()+{++++++++++++++++

++++++++++++/*+$(selector).hover(+inFunction,+outFunction+)+*/
++++++++++++$('.dropdown').hover(+
++++++++++++++++function()+{++++++++++++++++++++++++
++++++++++++++++++++$(this).find('ul').css({
++++++++++++++++++++++++"display":+"block",
++++++++++++++++++++++++"margin-top":+0
++++++++++++++++++++});++++++++++++++++++++++++
++++++++++++++++},+
++++++++++++++++function()+{++++++++++++++++++++++++
++++++++++++++++++++$(this).find('ul').css({
++++++++++++++++++++++++"display":+"none",
++++++++++++++++++++++++"margin-top":+0
++++++++++++++++++++});++++++++++++++++++++++++
++++++++++++++++}+
++++++++++++);

++++++++});|113159|codepen|offset|length|113160|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/antelove/pen/ZNrMLP^0|0|0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

html 

<pre><code> &lt;div class="dropdown"&gt;

 &lt;button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"&gt;
 Dropdown Example &lt;span class="caret"&gt;&lt;/span&gt;
 &lt;/button&gt;

 &lt;ul class="dropdown-menu"&gt;
 &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

 &lt;/div&gt; 
</code></pre>

jquery

<pre><code> $(document).ready( function() { 

 /* $(selector).hover( inFunction, outFunction ) */
 $('.dropdown').hover( 
 function() { 
 $(this).find('ul').css({
 "display": "block",
 "margin-top": 0
 }); 
 }, 
 function() { 
 $(this).find('ul').css({
 "display": "none",
 "margin-top": 0
 }); 
 } 
 );

 });
</code></pre>

<a href="https://codepen.io/antelove/pen/ZNrMLP" rel="nofollow noreferrer">codepen</a>

blocks|key|113178|text|使用mouseover()函数触发点击。这样，先前的单击事件将不会受到伤害。用户可以使用悬停和点击/触摸。它将是移动友好的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113179|$(".dropdown-toggle").mouseover(function(){
++++$(this).trigger('click');
})|code-block|syntax|javascript|113180|entityMap^0|2|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Use the <code>mouseover()</code> function to trigger the click. In this way the previous click event will not harm. User can use both hover and click/touch. It will be mobile friendly.
<pre><code>$(&quot;.dropdown-toggle&quot;).mouseover(function(){
 $(this).trigger('click');
})
</code></pre>

blocks|key|330667|text|您可以使用Jquery实现此功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330668|$('.dropdown').on('mouseover',+function(){
++++$(this).addClass('show');
++++$('.dropdown-menu').addClass('show');
++++$('.dropdown-toggle').attr('aria-expanded',+'true');

});
$('.dropdown').on('mouseout',+function(){
++++$(this).removeClass('show');
++++$('.dropdown-menu').removeClass('show');
++++$('.dropdown-toggle').attr('aria-expanded',+'false');
});|code-block|syntax|javascript|330669|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You implement this functionality by using Jquery:
<pre><code>$('.dropdown').on('mouseover', function(){
 $(this).addClass('show');
 $('.dropdown-menu').addClass('show');
 $('.dropdown-toggle').attr('aria-expanded', 'true');

});
$('.dropdown').on('mouseout', function(){
 $(this).removeClass('show');
 $('.dropdown-menu').removeClass('show');
 $('.dropdown-toggle').attr('aria-expanded', 'false');
});
</code></pre>

OK, so what I need is fairly straightforward.

I have set up a navbar with some dropdown menus in it (using <code>class="dropdown-toggle" data-toggle="dropdown"</code>), and it works fine.

The thing is it works "<code>onClick</code>", while I would prefer if it worked "<code>onHover</code>".

Is there any built-in way to do this?

Bootstrap Dropdown with Hover

jQuery

好的，所以我需要的是相当简单的。我已经设置了一个带有一些下拉菜单的导航栏(使用class="dropdown-toggle" data-toggle="dropdown")，它工作得很好。问题是它工作"onClick"，而我更喜欢它工作"onHover“。有什么内置的方法可以做到这一点吗？

问带悬停的引导下拉菜单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带悬停的引导下拉菜单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带悬停的引导下拉菜单
EN