Ad

Bootstrap Not Closing Menu

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;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                  <a class="navbar-brand" target="_blank" rel="nofollow noreferrer" href="#" target="_blank">Menu</a>
                </div>
                
                <div class="collapse navbar-collapse" id="navbar-collapse-1">
                    <ul class="nav navbar-nav">
                                                                             
                        <li><a target="_blank" rel="nofollow noreferrer" href="index.html">&nbsp;&nbsp;Anasayfa&nbsp;&nbsp;</a></li>

                        <li class="dropdown"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">&nbsp;&nbsp;Kurumsal&nbsp;&nbsp;&nbsp;&nbsp; <b class="caret"></b></a>
                            <ul class="dropdown-menu">
    <li><a target="_blank" rel="nofollow noreferrer" href="hakkimizda.html">Hakkımızda </a></li>
    <li><a target="_blank" rel="nofollow noreferrer" href="cozum-ortaklarimiz.html">Çözüm Ortaklarımız  </a></li>
    <li><a target="_blank" rel="nofollow noreferrer" href="sosyal-sorumluluk.html">Sosyal Sorumluluk  </a></li>
    <li><a target="_blank" rel="nofollow noreferrer" href="basin-odasi.html">Basın Odası </a></li>
    </ul></li>               
                           <li class="dropdown"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown">Hizmetler <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                               
     <li class="dropdown dropdown-submenu"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown">Araç Sigortaları</a>
     <ul class="dropdown-menu">
    	<li><a target="_blank" rel="nofollow noreferrer" href="tam-kasko-paket-policesi.html">Tam Kasko Paket Poliçesi </a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="trafik-sigortasi.html">Trafik Sigortası </a></li>
    	<li><a target="_blank" rel="nofollow noreferrer" href="yesil-kart-sigortasi.html">Yeşil Kart Sigortası  </a></li>
    </ul></li>

    <li class="dropdown dropdown-submenu"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown">İşyeri ve Konut Sigortaları</a>
     <ul class="dropdown-menu">
    	<li><a target="_blank" rel="nofollow noreferrer" href="isyeri-paket-sigortalari.html">İşyeri Paket Sigortaları </a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="konut-paket-sigortalari.html">Konut Paket Sigortaları </a></li>
    	<li><a target="_blank" rel="nofollow noreferrer" href="dask-sigortasi.html">Dask Sigortası </a></li>
    </ul></li>

    <li class="dropdown dropdown-submenu"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown">Sorumluluk Sigortaları  </a>
     <ul class="dropdown-menu">
    	<li><a target="_blank" rel="nofollow noreferrer" href="ucuncu-sahis-mali-sorumluluk.html">Üçüncü Şahıs Mali Sorumluluk </a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="asansor-sorumluluk.html">Asansör Sorumluluk</a></li>
    	<li><a target="_blank" rel="nofollow noreferrer" href="isveren-sorumluluk.html">İşveren Sorumluluk</a></li>
     	<li><a target="_blank" rel="nofollow noreferrer" href="mesleki-sorumluluk.html">Mesleki Sorumluluk</a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="zorunlu-hekim-sigortasi.html">Zorunlu Hekim Sigortası</a></li>
     	<li><a target="_blank" rel="nofollow noreferrer" href="ferdi-kaza-sigortasi.html">Ferdi Kaza Sigortası</a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="tasinan-para-sigortasi.html">Taşınan Para Sigortası</a></li>
     	<li><a target="_blank" rel="nofollow noreferrer" href="emniyeti-suistimal-sigortasi.html">Emniyeti Suistimal Sigortası</a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="urun-mali-sorumluluk-sigortasi.html">Ürün Mali Sorumluluk Sigortası</a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="seyahat-sigortasi.html">Seyahat Sigortası</a></li>
        </ul></li>
             
             
             <li class="dropdown dropdown-submenu"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown">Nakliyat Sigortaları  </a>
     <ul class="dropdown-menu">
    	<li><a target="_blank" rel="nofollow noreferrer" href="mal-nakli-sigortalari.html">Mal Nakli Sigortaları </a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="nakliyat-sorumluluk-sigortalari.html">Nakliyat Sorumluluk Sigortaları</a></li>
    	<li><a target="_blank" rel="nofollow noreferrer" href="deniz-araclari-sigortasi.html">Deniz Araçları Sigortası </a></li>
        </ul></li>                
                          
    <li class="dropdown dropdown-submenu"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown">Mühendislik Sigortaları </a>
     <ul class="dropdown-menu">
    	<li><a target="_blank" rel="nofollow noreferrer" href="elektronik-cihaz-sigortasi.html">Elektronik Cihaz Sigortası </a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="makina-kirilmasi-sigortasi.html">Makina Kırılması Sigortası</a></li>
    	<li><a target="_blank" rel="nofollow noreferrer" href="insaat-sigortasi.html">İnşaat Sigortası</a></li>
    </ul></li>

                          
    <li class="dropdown dropdown-submenu"><a target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown">Sağlık Sigortaları </a>
     <ul class="dropdown-menu">
    	<li><a target="_blank" rel="nofollow noreferrer" href="saglik-sigortasi.html">Sağlık Sigortası </a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="tamamlayici-saglik-sigortasi.html">Tamamlayıcı Sağlık Sigortası</a></li>

    </ul></li>
    </ul>
                        </li>                   
                       <li><a target="_blank" rel="nofollow noreferrer" href="servisler.html">&nbsp;&nbsp;Servisler&nbsp;&nbsp;&nbsp;&nbsp; </a></li>
                        <li><a target="_blank" rel="nofollow noreferrer" href="kariyer.html">&nbsp;&nbsp;Kariyer&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
                         <li><a target="_blank" rel="nofollow noreferrer" href="iletisim.html">&nbsp;&nbsp;İletişim&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
        </ul>
                </div><!-- /.navbar-collapse -->
            </nav>

You can test my code it is on up.

Ad

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.

Ad
source: stackoverflow.com
Ad