Bootstrap 下拉切换闪烁错误

Question

我正在处理一个在导航栏中有下拉菜单的预组装文件。客户希望在鼠标悬停时打开下拉菜单。所以我添加了一些 jQuery 来添加 class 'open'（就像单击下拉菜单时 bootstrap 所做的那样）。

这有效，但引起了新问题。当单击下拉菜单中的一个选项时，下拉菜单现在会闪烁一次，然后关闭并带我进入我选择的选项。

我已经对此进行了研究，但无法找出导致此问题的原因 'flash'。这是我发现的唯一一篇有希望的文章：Twitter bootstrap stop propagation on dropdown open

任何帮助都会很棒！

我试图在这个 JSFiddle 中重现这个问题，但我没有得到 'flash'。

这是我的 HTML 代码...

<div class="navbar navbar-default" role="navigation">
  <div class="container-fluid ">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="STUFF.cfm?page=home">
        STUFF AND MORE STUFF
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="##" class="dropdown-toggle" data-toggle="dropdown" id="nav-dropdown-toggle">FULL NAME STUFF <span class="caret"></span></a>
            <ul class="dropdown-menu dropdown-menu-css" role="menu">
              <li><a href="STUFF.cfm?page=home">Home Page</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 1</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 2</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 3</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 4</a></li>            
              <li class="divider"></li>
              <li><a id="logout-li" href="##" name="btn-logout">Logout</a></li>
          </ul>
          </li>
      </ul>
    </div> <!--/.nav-collapse -->
  </div> <!--/.container-fluid -->
</div>

这是JS

(function(){
  
  $("ul.nav.navbar-nav.navbar-right").hover( function(){

    $("li.dropdown").toggleClass('open');
  })
})()

需要注意的是，我们的基础语言是 ColdFusion。谢谢大家！

Answer 1

我会推荐你使用这个简单的css来实现你想要的--

/* Change color of dropdown links on hover */
.dropdown-menu a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus {
 background-image: none;
 background-color: #9fdfbf;
}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
  
</head>
<div class="navbar navbar-default" role="navigation">
  <div class="container-fluid ">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="STUFF.cfm?page=home">
        STUFF AND MORE STUFF
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="##" class="dropdown-toggle" data-toggle="dropdown" id="nav-dropdown-toggle">FULL NAME STUFF <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="STUFF.cfm?page=home">Home Page</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 1</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 2</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 3</a></li>
              <li><a href="STUFF.cfm?page=home">STUFF 4</a></li>            
              <li class="divider"></li>
              <li><a id="logout-li" href="##" name="btn-logout">Logout</a></li>
          </ul>
          </li>
      </ul>
    </div> <!--/.nav-collapse -->
  </div> <!--/.container-fluid -->
</div>

注意：我的回答在小屏幕上似乎有些问题。正在尝试解决这个问题！

希望对您有所帮助！

Answer 2

我的脚本过于频繁地切换 class 'open'，从而导致 'flashing' 效果。相反，我重写了我的 JS，如下所示，首先检查 'open' class 是否已经存在：

    $("ul.nav.navbar-nav.navbar-right").mouseenter(function(){
      if(!$("li.dropdown").hasClass("open")){
          $("li.dropdown").toggleClass('open');
        }
      })
      .mouseleave(function(){
        if($("li.dropdown").hasClass("open")){
            $("li.dropdown").toggleClass('open');
          }
        })

Bootstrap 下拉切换闪烁错误

Bootstrap dropdown-toggle flashing error

html

css

jquery

twitter-bootstrap

coldfusion-10