Bootstrap dropdown-toggle flashing error

Question

I'm working on a preassembled file that has a dropdown in the navigation bar. The client wants the dropdown to open on mouseover. So I added in some jQuery to add the class 'open' (as bootstrap does when the dropdown is clicked).

This worked but has caused a new issue. When clicking one of the choices in the drop down, the drop down now flashes once before closing and taking me on to the bage of my choice.

I have researched this and can not find out what is causing this 'flash'. This was the only article I found that showed promise: Twitter bootstrap stop propagation on dropdown open

Any help would be GREAT!

I tried to recreate this issues in this JSFiddle, but I do not get the 'flash'.

Here is my HTML code...

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

Here is the JS

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

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

It should be noted that our base language is ColdFusion. Thank you all!

score 1 · Answer 1 · answered Feb 15 '17 at 00:50

I would recommend you to use this simple css to achieve what you want--

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

Note : My answer seems to have some problem on small screen sizes. Trying fix that!

Hope this helps!

score 0 · Accepted Answer · answered Feb 16 '17 at 17:44

My script was toggling the class 'open' too often, thus causing a 'flashing' effect. Instead I rewrote my JS as follows checking first if the 'open' class was already present:

    $("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 dropdown-toggle flashing error

2 Answers2