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

Question

我有一个脚本，如果导航栏未折叠，当用户将鼠标悬停在菜单项上时，该脚本会切换下拉菜单。 我也尝试将.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' );
    }
});

Answer 1

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

（ 演示 ）

改变这个...

<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>

Answer 2

您应该创建两个不同的.navbar-brand元素，并使用引导响应实用程序在两者之间进行切换。 所以像这样：

<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>