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

时间:2015-05-28 15:22:37

标签: javascript jquery html css twitter-bootstrap

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:-1)

您应该创建两个不同的.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>