Question

我正在处理预组装文件，该文件在导航栏中有一个下拉列表。客户希望鼠标悬停时打开下拉列表。所以我在一些jQuery中添加了类'open'（当单击下拉列表时引导程序执行）。

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

我研究了这个并且无法找出造成这种“闪光”的原因。这是我发现的唯一展示承诺的文章：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

我的脚本正在切换课程＆＃39;打开＆＃39;过于频繁，从而引起“闪烁”。影响。相反，我重写了我的JS，如下所示，首先检查＆＃39;打开＆＃39;班级已经存在：

＆＃13;

    $("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');
          }
        })

＆＃13;

Bootstrap下拉切换闪烁错误

2 个答案: