如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表

作者: 昵称不能为空
发布时间: 2024-12-11 06:56:42 (1月前)
转自：

16 条回复

0#
回复此人
楊♡ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我发表了一篇的<strong> 适当的插件 </强> 对于Bootstrap 3下拉悬停功能，您甚至可以在其中定义单击时发生的情况 <code> dropdown-toggle </code> 元素（可以禁用点击）： </p> <P> <a href="https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover" rel="nofollow noreferrer"> https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover </A> </p> <HR /> <H2> 为什么我已经有很多解决方案了？ </H2> <P> 我遇到了所有以前存在的解决方案的问题。简单的CSS没有使用 <code> .open </code> 上课 <code> .dropdown </code> ，因此当下拉菜单可见时，下拉切换元素将不会有任何反馈。 </p> <P> js正在干扰点击 <code> .dropdown-toggle </code> ，因此下拉列表会显示下拉列表，然后在单击打开的下拉列表时隐藏它，移出鼠标会触发下拉列表再次显示。一些js解决方案破坏了iOS兼容性，一些插件不适用于支持触摸事件的现代桌面浏览器。 </p> <P> 这就是我成功的原因 <a href="https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover" rel="nofollow noreferrer"> Bootstrap Dropdown Hover </A> 的<strong> 插入 </强> 这可以防止所有这些问题的<strong> 仅使用标准的Bootstrap javascript API，没有任何破解 </强> 。即使是Aria属性也能正常使用这个插件。 </p> </DIV>

编辑
1#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用此代码在mousehover上打开子菜单（仅限桌面）： </p> <pre> <code> $('ul.nav li.dropdown').hover(function () { if ($(window).width() > 767) { $(this).find('.dropdown-menu').show(); } }, function () { if ($(window).width() > 767) { $(this).find('.dropdown-menu').hide().css('display',''); } }); </code> </pre> <P> 如果您希望第一级菜单可以点击，即使在移动设备上也可以添加： </p> <pre> <code> $('.dropdown-toggle').click(function() { if ($(this).next('.dropdown-menu').is(':visible')) { window.location = $(this).attr('href'); } }); </code> </pre> <P> 子菜单（下拉菜单）将通过鼠标悬停在桌面上打开，并通过手机和平板电脑上的点击/触摸来打开。子菜单打开后，第二次单击将允许您打开链接。感谢 <code> if ($(window).width() > 767) </code> ，子菜单将采用移动设备的全屏宽度。 </p> </DIV>

编辑
2#
回复此人
淋了一整夜的雨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用此脚本覆盖bootstrap.js。 </p> <pre> <code> jQuery(document).ready(function ($) { $('.navbar .dropdown').hover(function() { $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); }, function() { var na = $(this) na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') }) }); $('.dropdown-submenu').hover(function() { $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); }, function() { var na = $(this) na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') }) }); }); </code> </pre> </DIV>

编辑
3#
回复此人
Let us fly | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 加强 <a href="https://stackoverflow.com/a/23654267/858905"> Sudharshan的回答 </A> ，我将它包装在媒体查询中以防止在XS显示宽度时悬停... </p> <pre> <code> @media (min-width:768px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } .nav .dropdown-menu { margin-top: 0; } } </code> </pre> <P> 此外，标记中的插入符号不是必需的，只是的<strong> 落下 </强> 为了这个班级的<strong> 里 </强> 。 </p> </DIV>

编辑
4#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是内置于Bootstrap 3中的。只需将其添加到您的CSS： </p> <pre> <code> .dropdown:hover .dropdown-menu { display: block; } </code> </pre> </DIV>

编辑
5#
回复此人
只怕再见是故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于插入符...我没有看到任何一个指定简单的CSS完全阻止插入符号。 </p> <P> 干得好： </p> <pre> <code> .caret { display: none !important; } </code> </pre> </DIV>

编辑
6#
回复此人
࿏自ོ༾由ོ༽人͙⃡⌇ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果它们比平板电脑小，它应该隐藏掉落和它们的插入物。 </p> <pre> <code> @media (max-width: 768px) { .navbar ul.dropdown-menu, .navbar li.dropdown b.caret { display: none; } } </code> </pre> </DIV>

编辑
7#
回复此人
日耀九洲 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用jQuery更好： </p> <pre> <code> jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).find('.dropdown-menu').stop(true, true).show(); jQuery(this).addClass('open'); }, function() { jQuery(this).find('.dropdown-menu').stop(true, true).hide(); jQuery(this).removeClass('open'); }); </code> </pre> </DIV>

编辑
8#
回复此人
撩心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要使菜单在悬停时自动停止，那么可以使用基本CSS实现。您需要将选择器设置为隐藏菜单选项，然后将其设置为在适当时显示为块 <code> li </code> 标签悬停在上面。以twitter bootstrap页面为例，选择器如下： </p> <pre class="lang-css prettyprint-override"> <code> ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } </code> </pre> <P> 但是，如果您使用的是Bootstrap的响应功能，则在折叠的导航栏上（在较小的屏幕上）不需要此功能。要避免这种情况，请将以上代码包装在媒体查询中： </p> <pre> <code> @media (min-width: 979px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } } </code> </pre> <HR /> <P> 要隐藏箭头（插入符号），这将以不同的方式完成，具体取决于您使用的是Twitter Bootstrap版本2及更低版本还是版本3： </p> <P> <B> Bootstrap 3 </B> </p> <P> 要删除版本3中的插入符号，只需删除HTML即可 <code> <b class="caret"></b> </code> 来自 <code> .dropdown-toggle </code> 锚元素： </p> <pre class="lang-html prettyprint-override"> <code> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> <-- remove this line </a> </code> </pre> <P> <B> Bootstrap 2＆amp;降低 </B> </p> <P> 要删除版本2中的插入符号，您需要更多地了解CSS，我建议查看如何 <code> :after </code> 伪元素更详细。为了让您开始理解，定位和删除twitter bootstrap示例中的箭头，您将使用以下CSS选择器和代码： </p> <pre class="lang-css prettyprint-override"> <code> a.menu:after, .dropdown-toggle:after { content: none; } </code> </pre> <P> 如果你进一步研究这些工作的方式而不仅仅是使用我给你的答案，它将对你有利。 </p> <P> 的<strong> <EM> 感谢@CocaAkat指出我们错过了“＆gt;”子组合子，以防止父菜单上显示子菜单 </EM> </强> </p> </DIV>

编辑
9#
回复此人
圈圈红 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $('.dropdown').hover(function(e){$(this).addClass('open')}) </code> </pre> </DIV>

编辑
10#
回复此人
不想吃东西 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这将隐藏上升的 </p> <pre> <code> .navbar .dropdown-menu:before { display:none; } .navbar .dropdown-menu:after { display:none; } </code> </pre> </DIV>

编辑
11#
回复此人
نسر الصحراء | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我的技术，在您停止悬停在菜单或切换按钮上之后，在菜单关闭之前会稍微延迟。该 <code> <button> </code> 您通常会单击以显示导航菜单 <code> #nav_dropdown </code> 。 </p> <pre> <code> $(function() { var delay_close_it, nav_menu_timeout, open_it; nav_menu_timeout = void 0; open_it = function() { if (nav_menu_timeout) { clearTimeout(nav_menu_timeout); nav_menu_timeout = null; } return $('.navbar .dropdown').addClass('open'); }; delay_close_it = function() { var close_it; close_it = function() { return $('.navbar .dropdown').removeClass('open'); }; return nav_menu_timeout = setTimeout(close_it, 500); }; $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it); return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it); }); </code> </pre> </DIV>

编辑
12#
回复此人
故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用默认值 <code> $().dropdown('toggle') </code> 在悬停时切换下拉菜单的方法： </p> <pre> <code> $(".nav .dropdown").hover(function() { $(this).find(".dropdown-toggle").dropdown("toggle"); }); </code> </pre> </DIV>

编辑
13#
回复此人
不丶离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 还添加了margin-top：0来重置.dropdown-menu的bootstrap css边距，这样当用户从下拉菜单慢慢地徘徊到菜单列表时，菜单列表不会消失。 </p> <pre> <code> ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } .nav .dropdown-menu { margin-top: 0; } </code> </pre> </DIV>

编辑
14#
回复此人
滔滔江水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这里有很多非常好的解决方案。但是我想我会继续把我的作为另一种选择。它只是一个简单的jQuery代码片段，如果它支持将鼠标悬停在下拉菜单而不是单击，那么就像引导程序一样。我只用版本3对它进行了测试，所以我不知道它是否适用于版本2.将它保存为编辑器中的一个片段，然后按一下键。 </p> <pre> <code> <script> $(function() { $(".dropdown").hover( function(){ $(this).addClass('open') }, function(){ $(this).removeClass('open') } ); }); </script> </code> </pre> <P> 基本上，它只是说当你将鼠标悬停在下拉类时，它会向它添加开放类。然后就行了。当您停止使用下拉类或子ul / li徘徊在父li上时，它将删除打开的类。显然，这只是众多解决方案中的一种，您可以添加它以使其仅适用于.dropdown的特定实例。或者向父级或子级添加转换。 </p> </DIV>

编辑

登录后才能参与评论