我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
为了加强Sudharshan的回答,我将其包装在一个媒体查询中,以防止在XS显示宽度上出现悬停……
@media (min-width:768px)
{
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
}
标记中的插入符号也不是必需的,只是li的下拉类。
其他回答
这可能是一个愚蠢的想法,但要删除指向向下的箭头,您可以删除
<b class="caret"></b>
不过,这对向上的那个没有任何作用……
$('.dropdown').hover(function(e){$(this).addClass('open')})
最标准的回答:
支持aria-expanded属性 支持非触摸设备 支持触摸设备 支持所有下拉菜单
var isTouchDevice = (('ontouchstart' in window) ||
(navigator.MaxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
// open dropdowns on hover on non mobile devices
$(".dropdown").hover(function(e) {
$('.dropdown-toggle', this).dropdown("toggle");
e.stopPropagation();
});
// prevent blinkling
$(".submenu-link").click(function(e) {
e.stopPropagation();
});
}
如果你需要,你可以将$(".dropdown")更改为特定的区域:
$("#top-menu .dropdown")
这样就把上面的隐藏起来了
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
以下是我的技巧,它在你停止在菜单或切换按钮上悬停后,在菜单关闭之前添加了轻微的延迟。你通常点击来显示导航菜单的<按钮>是#nav_dropdown。
$(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);
});
推荐文章
- 如何以编程方式触发引导模式?
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 如何使用Twitter的Bootstrap内联显示列表
- 相对定位一个元素,而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?