我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
Bootstrap 4, 2019
我读了很多这样的答案,但最后我自己做了,因为这不是我需要的。
我有引导4,并希望保持点击+悬停功能。此外,我想启用它只有下拉有一个额外的类“.open-on-hover”。
我还想保持Bootstrap的Jquery定位下拉菜单时,它是旁边的页面边缘。所以我们不仅仅要做"display: block"我们想要完整的Bootstrap工作方式。所以我只是触发点击。
逻辑是,如果它是mouseenter则打开它,如果它是mouseleave则隐藏它,如果它是打开的
/**
* Open Bootstrap 4 dropdown on hover
*/
$(document).on('mouseenter mouseleave', '.dropdown.open-on-hover', function(e)
{
let toggler = $(this).find('[data-toggle="dropdown"]').first();
if(e.type === 'mouseenter') {
$(toggler).trigger('click', 'open');
} else if ($(this).children('.dropdown-menu.show').length) {
$(toggler).trigger('click', 'close');
}
});
html
<div class="dropdown open-on-hover">
<div class="btn" data-toggle="dropdown">
Hover or click me
</div>
<div class="dropdown-menu">
<a class="dropdown-item">
Item 1
</a>
<a class="dropdown-item">
Item 2
</a>
</div>
</div>
其他回答
这适用于WordPress Bootstrap:
.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
content: none;
}
这里有很多非常好的解决方案。但我想我还是把我的放在这里作为另一种选择。这只是一个简单的jQuery代码片段,如果它支持悬停下拉而不是单击,它就会以引导的方式完成。我只测试了版本3,所以我不知道它是否适用于版本2。将其保存为编辑器中的一个片段,按一下键就可以看到它。
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
基本上,它只是说当你悬停在下拉类上时,它会向它添加开放类。这样就可以了。当您停止在带有下拉类的父类li或子类ul/li上悬停时,它将删除打开类。显然,这只是众多解决方案中的一个,您可以对其进行添加,使其仅适用于.dropdown的特定实例。或者向父级或子级添加转换。
我希望这能有所帮助。查看链接https://jsfiddle.net/awb7gfb1/
<nav>
<div id="menubar" class=" collapse navbar-collapse row">
<ul id="dropdownNavbar" class="nav navbar-nav">
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-time"></span>
Time Card
<span class="caret"></span></button>
<div class="dropdown-content">
<a id="showTimeCard" href="#">My Time Card</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-stats"></span>
Project
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-user"></span>
HR Links
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-screenshot"></span>
Leave Tracker
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-briefcase"></span>
Accounts
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-headphones"></span>
Service Desk
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-file"></span>
Reports
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-cog"></span>
Settings
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
</ul>
</div>
</nav>
还有CSS
.dropdown {
float: left;
padding-right: 1px;
}
.dropbtn{
border: 0px;
height: 30px;
border-radius: 0px 10px;
}
li button, .dropbtn {
display: inline-block;
color: white;
text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
background-color: #12A5F4;
}
.dropbtn.active {
background: #12A5F4;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e8f3f4;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.navbar-header{
overflow: visible;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8dee2
}
.dropdown:hover .dropdown-content {
display: block;
}
#menubar{
padding-top: 5px;
overflow: visible;
z-index: 10;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
#dropdownNavbar{
margin: 0px;
}
.navbar-toggle{
background-color: #3382d5;
}
.navbar-toggle span{
background-color: white;
}
版本2的解决方案非常简单,只有CSS。 保持相同的友好功能的手机和平板电脑。
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
对于插入符号…我还没见过有人指定简单的CSS完全阻止插入符号。
给你:
.caret {
display: none !important;
}