在悬停时切换下拉菜单的脚本不适用于新的下拉菜单答案

【问题标题】：Script to toggle dropdown menu on hover isn't working for new dropdown menu在悬停时切换下拉菜单的脚本不适用于新的下拉菜单
【发布时间】：2015-05-28 15:22:36
【问题描述】：

如果导航栏未折叠，我有一个脚本，当用户将鼠标悬停在菜单项上时，它会切换下拉菜单。我也尝试将.navbar-brand 变成下拉菜单，但悬停时无法打开。

为什么这不起作用？

这是最后的工作小提琴。 http://jsfiddle.net/galindbergh/jkkvk1v7/13/

这是我为 navbar-brand 下拉菜单尝试的 HTML，但无法正常工作。

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand dropdown" style="font-size: 14px;" data-toggle="dropdown">Brand Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

这是在悬停时切换下拉菜单的脚本

$( '.dropdown' ).hover(function() {
    // you could also use this condition: $( window ).width() >= 768
    if ($('.navbar-toggle').css('display') === 'none' 
        && false === ('ontouchstart' in document)) {
        $( '.dropdown-toggle', this ).trigger( 'click' );
    }
}, function() {
    if ($('.navbar-toggle').css('display') === 'none'
        && false === ('ontouchstart' in document)) {
        $( '.dropdown-toggle', this ).trigger( 'click' );
    }
});

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您需要正确构建下拉菜单。

(Demo)

改变这个...

<a href="#" class="navbar-brand dropdown" style="font-size: 14px;" data-toggle="dropdown">Brand Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

到这里……

<ul class="nav navbar-nav col-xs-10 col-sm-12">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Brand Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
</ul>

【讨论】：

现在我想使用您的脚本更改导航栏折叠断点。 stackoverflow.com/questions/30603494/…>

【解决方案2】：

您应该创建两个不同的 .navbar-brand 元素并使用 bootstrap responsive utilities 在两者之间切换。所以像：

<a href="#" class="navbar-brand dropdown visible-md visible-lg">Brand Dropdown</a>
<a href="#" class="navbar-brand visible-xs visible-sm">Brand Normal</a>

【讨论】：