Bootstrap not closing menu

Question

I maked one html site using bootstrap. That sites have one menu but i think problem is my javascript i maked it that auto open when mouseover it menu but not closed automatic.

    	(function($){
    	$(document).ready(function(){
    		$('ul.nav [data-toggle=dropdown]').on('mouseover', function(event) {
    			event.preventDefault(); 
    			event.stopPropagation(); 
    			$(this).parent().siblings().removeClass('open');
    			$(this).parent().toggleClass('open');
    		});
    	});
    })(jQuery);

    .navbar-brand {display:none;}
    .fullwidth {width:100%; background:#1e537f;}

    .navbar {
        position: relative;
        min-height: 40px;
        margin-bottom: 0;
        border: 1px solid transparent;
    	width:100%;
    	text-align:center;
    }

    .navbar-header {}
    .navbar-inverse .navbar-nav>li>a {color:#FFFFFF;}
    .navbar-inverse
    {background:#1e537f; text-align:center;}

    .navbar-nav>li {text-align:center;}

    .navbar-inverse .navbar-brand {color:#FFFFFF;}

    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background:#143957;}
    .navbar-inverse .navbar-toggle {background:#143957; border:none;}
    .navbar-nav>a:hover {background:#1b4b72;}
    .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {background:#1b4b72;}
    .navbar ul{text-align:center; padding:0 0 0 30%; }
    .navbar ul li {text-align:left;}
    .navbar ul li ul {padding:0;}

    .navbar-nav>li>.dropdown-menu {background:#1b4b72; }

    .navbar-inverse .navbar-nav>li>a:hover {background:#1b4b72;}
    .dropdown-menu {border:none; }
    .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #FFFFFF;
        white-space: nowrap;

    }

    .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:#143957;
    color:#FFFFFF; }

    .dropdown-menu>li>a:hover {
        display: block;
    background:#143957;
    color:#FFFFFF;
    border-radius:4px;

    }
    .dropdown-submenu>.dropdown-menu {background:#1b4b72;}

    .dropdown-submenu{position:relative;}
    .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:0;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
    .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
    .dropdown-submenu:hover>a:after{border-left-color:#555;}
    .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
    .carousel-indicators li {width:40px; height:40px;border-radius:50%; background:#FFFFFF;}
    .carousel-indicators .active  {width:40px; height:40px;border-radius:50%; background:#1e537f; border:none;}
    .carousel-caption {margin-bottom:80px;}
    .carousel-caption  h2{ font-size:46px;}
    .carousel-control.right, .carousel-control.left {background:none;}

    
    
    

    
    

    
    
    
                
                    
                  Menu
                
                
                
                    
                                                                             
                          Anasayfa  

                          Kurumsal     
                            
    Hakkımızda 
    Çözüm Ortaklarımız  
    Sosyal Sorumluluk  
    Basın Odası 
                   
                           Hizmetler 
                            
                               
     Araç Sigortaları
     
    	Tam Kasko Paket Poliçesi 
        Trafik Sigortası 
    	Yeşil Kart Sigortası  
    

    İşyeri ve Konut Sigortaları
     
    	İşyeri Paket Sigortaları 
        Konut Paket Sigortaları 
    	Dask Sigortası 
    

    Sorumluluk Sigortaları  
     
    	Üçüncü Şahıs Mali Sorumluluk 
        Asansör Sorumluluk
    	İşveren Sorumluluk
     	Mesleki Sorumluluk
        Zorunlu Hekim Sigortası
     	Ferdi Kaza Sigortası
        Taşınan Para Sigortası
     	Emniyeti Suistimal Sigortası
        Ürün Mali Sorumluluk Sigortası
        Seyahat Sigortası
        
             
             
             Nakliyat Sigortaları  
     
    	Mal Nakli Sigortaları 
        Nakliyat Sorumluluk Sigortaları
    	Deniz Araçları Sigortası 
                        
                          
    Mühendislik Sigortaları 
     
    	Elektronik Cihaz Sigortası 
        Makina Kırılması Sigortası
    	İnşaat Sigortası
    

                          
    Sağlık Sigortaları 
     
    	Sağlık Sigortası 
        Tamamlayıcı Sağlık Sigortası

    
    
                                           
                         Servisler     
                          Kariyer     
                           İletişim

You can test my code it is on up.

Steve K · Accepted Answer

You will want to create a mouseenter function for the dropdown toggle and then a mouseleave function for the dropdown and dropdown-submenu. If im understanding your problem correctly. So your code should look something like this I think.

 $('ul.nav [data-toggle=dropdown').on({
  mouseenter: function(event) {
    if (!$(this).hasClass("open")) {
      $(this).parent().toggleClass('open');
    }
  }
});
$('ul.nav .dropdown, .dropdown-submenu').on({
  mouseleave: function(event) {
    if ($(this).hasClass("open")) {
      $(this).toggleClass('open');
    }
  }
});

Here is a link to a fiddle with it working Fiddle.

Just to let you know you may run into some problems with your menu being too long because when the mouse leaves the dropdown menu and submenus the menu will close so they will not be able to scroll down to see all of the links but if I understand your problem correctly I think this should solve your problem.

P.S I left the event in there in case you need an event to be executed but if not you can take it out.

Bootstrap not closing menu

Answers (1)

Related Questions