Twitter Bootstrap Question posted in

Bootstrap dropdown-toggle flashing error – Twitter bootstrap

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search