我正在使用yamm3菜单，我希望顶级菜单项可以点击，然后在悬停时显示下拉列表。
我正在使用以下代码来悬停下拉菜单，而不是点击：
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
但我仍然无法获得可点击的顶级菜单项。
这是HTML
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About Us<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#"> Meet Our Team</a></li>
<li><a tabindex="-1" href="#"> Why GoPlay </a></li>
<li><a tabindex="-1" href="#"> Affiliations </a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Contact US </a></li>
</ul>
</li>
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Browse Tours<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Soccer" src="images/placeholder_browsetours_dropdown.png"></a><br/>Soccer</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Rugby" src="images/placeholder_browsetours_dropdown.png"></a><br/>Rugby</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Volleyball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Volleyball</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Field Hockey" src="images/placeholder_browsetours_dropdown.png"></a><br/>Field Hockey</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Basketball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Basketball</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Baseball and Softball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Baseball/Sofatball</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Other Sports" src="images/placeholder_browsetours_dropdown.png"></a><br/>Other Sports</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Tournaments" src="images/placeholder_browsetours_dropdown.png"></a><br/>Tournaments</div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Fan Tours" src="images/placeholder_browsetours_dropdown.png"></a><br/>Fan Tours</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Coaches<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#"> Sports Philosophy</a></li>
<li><a tabindex="-1" href="#">Five Steps Planning Your Tour </a></li>
<li><a tabindex="-1" href="#"> What to Expect </a></li>
<li><a tabindex="-1" href="#"> Benefits </a></li>
<li><a tabindex="-1" href="#"> Service Guarantee </a></li>
<li><a tabindex="-1" href="#"> What to Expect Overseas</a></li>
<li><a tabindex="-1" href="#"> Download Coaches Handbook</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Players<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#"> Travel With GoPlay</a></li>
<li><a tabindex="-1" href="#"> What to Pack </a></li>
<li><a tabindex="-1" href="#"> Making Payments </a></li>
<li><a tabindex="-1" href="#"> Automatic Payments </a></li>
<li><a tabindex="-1" href="#"> Protection Plans </a></li>
<li><a tabindex="-1" href="#"> Keeping in Touch </a></li>
<li><a tabindex="-1" href="#"> GoPlay Travel App </a></li>
<li><a tabindex="-1" href="#"> FAQ </a></li>
</ul>
</li>
<li class="no-dropdown"><a href="#"> Flights </a></li>
<li class="no-dropdown"><a href="#"> Blog </a></li>
</ul>
</div>
答案 0 :(得分：0)
您必须删除顶级项目上的data-toggle =“下拉列表”。否则它将无法工作。我建议只使用CSS进行下拉菜单。
因此可能重复：How to make twitter bootstrap menu dropdown on hover rather than click
答案 1 :(得分：0)
由于我有一堆其他代码需要通常在非dropdown-hoverable组件中运行，所以我通过利用bootstraps dropdown.js中的本机事件解决了这个问题。在另一个使用css的线程中找到的解决方案不在我的情况下工作。
下面是我的解决方案，因为我为可见性和隐藏状态添加了一个计时器，所以更加冗长。如果删除了，解决方案可能接近8行代码。
export default class DropdownHover extends Dropdown {
constructor(...args){
super(...args)
this.timerIn = null;
this.timerOut = null;
this.inTime = 250
this.outTime = 100
}
config(isInitialized){
super.config(isInitialized)
if(isInitialized) return
var button = this.$()
button.hover(this.mouseIn.bind(this), this.mouseOut.bind(this))
this.dropdown = this.$()
}
mouseIn(){
if(this.timerIn) {
clearTimeout(this.timerIn);
this.timerIn = null
// If there are any gaps between the dropdown
// and the menu this will fix it
clearTimeout(this.timerOut);
this.timerOut = null
}
this.timerIn = setTimeout(() => {
this.dropdown
.addClass('open')
.trigger($.Event('shown.bs.dropdown')) // If you look in dropdown.js this is the event used to trigger other actions.
}, this.inTime)
}
mouseOut(){
if(this.timerOut) {
clearTimeout(this.timerOut);
this.timerOut = null
}
this.timerOut = setTimeout(() => {
this.dropdown
.removeClass('open')
.trigger($.Event('hidden.bs.dropdown'))
}, this.outTime)
}
}