[英]Activating bootstrap dropdown menu on hover
I have some problem with activating bootstrap dropdown menu on hover - it only works on click.我在悬停时激活引导程序下拉菜单时遇到一些问题 - 它仅适用于点击。 Here is the Bootply version: Bootply version
这是 Bootply 版本: Bootply 版本
Any suggestions what I'm doing wrong?任何建议我做错了什么?
To use your existing code, add the following line to your hover listener:要使用现有代码,请将以下行添加到您的悬停侦听器:
$($(this).data('target')).collapse('show');
Working fork of your bootply: http://www.bootply.com/FRv5lVuiJk bootply 的工作叉: http : //www.bootply.com/FRv5lVuiJk
That being said, there is a more effecient way of doing this using tabs.话虽如此,使用选项卡有一种更有效的方法。 See http://www.bootply.com/TjqIiOM7Hi for a working example, and the code is below.
有关工作示例,请参见http://www.bootply.com/TjqIiOM7Hi ,代码如下。
HTML HTML
<div class="container">
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a href="#one" data-toggle="tab">One</a>
</li>
<li class="dropdown">
<a href="#two" data-toggle="tab">Two</a>
</li>
<li class="dropdown">
<a href="#three" data-toggle="tab">Three</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-default right tab-content" role="navigation" id="submenu">
<ul class="nav navbar-nav tab-pane active" id="one">
<li><a href="#" id="">One sub 1</a></li>
<li><a href="#" id="">One sub 2</a></li>
<li><a href="#" id="">One sub 3</a></li>
<li><a href="#" id="">One sub 4</a></li>
</ul>
<ul class="nav navbar-nav tab-pane" id="two">
<li><a href="#" id="">Two sub 1</a></li>
<li><a href="#" id="">Two sub 2</a></li>
<li><a href="#" id="">Two sub 3</a></li>
</ul>
<ul class="nav navbar-nav tab-pane" id="three">
<li><a href="#" id="">Three sub 1</a></li>
<li><a href="#" id="">Three sub 2</a></li>
</ul>
</nav>
</div>
Javascript Javascript
$('[data-toggle=tab]').hover(function (e) {
$(this).click();
});
You can do this.你可以这样做。 No JavaScript needed
不需要 JavaScript
<div class="dropdown">
<button class="">
<a class="">Dropdown</a>
</button>
<div class="dropdown-content">
<a class="dropdown-item">Item 1</a>
<a class="dropdown-item">Item 2</a>
<a class="dropdown-item">Item 3</a>
</div>
</div>
you can obviously change the style to your preference but the code relating to the display is important.您显然可以根据自己的喜好更改样式,但与显示相关的代码很重要。
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color:#6c757d;
}
Just slot in the menu in the position you want along with your bootstrap classes.只需将菜单插入您想要的位置以及引导程序类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.