jqueryhoverintent

Hover intent javascript not working on div structure menus


I am trying to add hover intent.js in for menus for smooth hovering effect, but is is not working. Although it work well if i add it on ul, but not work if i add ul inside div.

Please find the code below which i am trying to implement. I am using hover intent library with bootstrap

 <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/2013.03.11/hoverintent.min.js"></script>
<script>     
   jQuery(document).ready(function () {
     "use strict";           
     var $ = jQuery.noConflict();

     function showMenu() {
       $(this).removeClass("drop-collapsed");
       $(this).addClass("open");
     }
     function hideMenu(){
       $(this).removeClass("open");
       var $dropdown = $(".dropdown");              

       $dropdown.each(function () {
         $(this).addClass("drop-collapsed");
       }
      );
     }          

     var $dropdown = $(".dropdown");                        
     $dropdown.each(function () {
       var $this = $(this);
       var $dropmenu = $this.find(".dropdown-menu");
       $dropmenu.css("height", $dropmenu.outerHeight());

       $this.addClass("drop-collapsed");
     }
    );     

     // dropdown menu hover intent
     var hovsettings = {
       timeout:0,
       interval: 0,
       over: showMenu,
       out: hideMenu
     }

     $(".dropdown").hoverIntent(hovsettings);
   }
   );   
</script>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Dropdown 
      <b class="caret">
      </b>
      </a>
      <ul class="dropdown-menu">
         <li>
            <a href="#">
            Action
            </a>
         </li>
         <li>
            <a href="#">
            Another action
            </a>
         </li>
      </ul>
   </li>
</ul>


Solution

  • Look at this Link.

     jQuery(document).ready(function () {
          "use strict";           
          var $ = jQuery.noConflict();
    
          function showMenu() {
            $(this).removeClass("drop-collapsed");
            $(this).addClass("open");
          }
          function hideMenu(){
            $(this).removeClass("open");
            var $dropdown = $(".dropdown");
            //var $dropdown= $(".li.has-childern")
    
            $dropdown.each(function () {
              $(this).addClass("drop-collapsed");
            }
           );
          }          
    
          var $dropdown = $(".dropdown");
          //var $dropdown= $(".li.has-childern");
    
          $dropdown.each(function () {
            var $this = $(this);
            var $dropmenu = $this.find(".dropdown-menu");
            $dropmenu.css("height", $dropmenu.outerHeight());
    
            $this.addClass("drop-collapsed");
          }
         );
    
    
          // dropdown menu hover intent
          var hovsettings = {
            timeout:0,
            interval: 0,
            over: showMenu,
            out: hideMenu
          }
          ;
    
    
          $(".dropdown").hoverIntent(hovsettings);
        }
        );
    

    I set dropdown-menu class only for top div container. You need to fix styles to it looks good.