我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
这样就把上面的隐藏起来了
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
其他回答
<!DOCTYPE html> <html> <head> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>Hoverable Dropdown</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html>
最标准的回答:
支持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")
使用以下代码在鼠标悬停时打开子菜单(仅适用于桌面):
$('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','');
}
});
如果你想让第一关菜单是可点击的，甚至在手机上也可以添加这个:
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
子菜单(下拉菜单)将打开鼠标悬停在桌面上，点击/触摸移动和平板电脑。 一旦子菜单打开，第二次单击将让您打开链接。 多亏了if ($(window).width() > 767)，子菜单将在移动设备上采用全屏宽度。
这将隐藏下拉列表和它们的插入符号，如果它们比平板电脑小。
@media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
除了来自“我的头很疼”的答案(这很棒):
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
有两个挥之不去的问题:
单击下拉链接将打开下拉菜单。而且它会一直打开，除非用户点击其他地方，或者将鼠标悬停在它上面，创建一个尴尬的UI。 下拉链接和下拉菜单之间有1px的空白。如果您在下拉菜单和下拉菜单之间缓慢移动，这将导致下拉菜单变得隐藏。
(1)的解决方案是从nav链接中删除“class”和“data-toggle”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
这还使您能够创建到父页面的链接——这在默认实现中是不可能的。您只需将“#”替换为您想要发送给用户的任何页面。
(2)的解决方案是删除.下拉菜单选择器上的margin-top
.navbar .dropdown-menu {
margin-top: 0px;
}
