我使用bootstrap创建了一个html站点。那些网站有一个菜单，但我认为问题是我的javascript我将它自动打开当鼠标悬停它菜单但不自动关闭。
(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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" 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" href="#" target="_blank">Menu</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html"> Anasayfa </a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Kurumsal <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="hakkimizda.html">Hakkımızda </a></li>
<li><a href="cozum-ortaklarimiz.html">Çözüm Ortaklarımız </a></li>
<li><a href="sosyal-sorumluluk.html">Sosyal Sorumluluk </a></li>
<li><a href="basin-odasi.html">Basın Odası </a></li>
</ul></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Hizmetler <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Araç Sigortaları</a>
<ul class="dropdown-menu">
<li><a href="tam-kasko-paket-policesi.html">Tam Kasko Paket Poliçesi </a></li>
<li><a href="trafik-sigortasi.html">Trafik Sigortası </a></li>
<li><a href="yesil-kart-sigortasi.html">Yeşil Kart Sigortası </a></li>
</ul></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">İşyeri ve Konut Sigortaları</a>
<ul class="dropdown-menu">
<li><a href="isyeri-paket-sigortalari.html">İşyeri Paket Sigortaları </a></li>
<li><a href="konut-paket-sigortalari.html">Konut Paket Sigortaları </a></li>
<li><a href="dask-sigortasi.html">Dask Sigortası </a></li>
</ul></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Sorumluluk Sigortaları </a>
<ul class="dropdown-menu">
<li><a href="ucuncu-sahis-mali-sorumluluk.html">Üçüncü Şahıs Mali Sorumluluk </a></li>
<li><a href="asansor-sorumluluk.html">Asansör Sorumluluk</a></li>
<li><a href="isveren-sorumluluk.html">İşveren Sorumluluk</a></li>
<li><a href="mesleki-sorumluluk.html">Mesleki Sorumluluk</a></li>
<li><a href="zorunlu-hekim-sigortasi.html">Zorunlu Hekim Sigortası</a></li>
<li><a href="ferdi-kaza-sigortasi.html">Ferdi Kaza Sigortası</a></li>
<li><a href="tasinan-para-sigortasi.html">Taşınan Para Sigortası</a></li>
<li><a href="emniyeti-suistimal-sigortasi.html">Emniyeti Suistimal Sigortası</a></li>
<li><a href="urun-mali-sorumluluk-sigortasi.html">Ürün Mali Sorumluluk Sigortası</a></li>
<li><a href="seyahat-sigortasi.html">Seyahat Sigortası</a></li>
</ul></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Nakliyat Sigortaları </a>
<ul class="dropdown-menu">
<li><a href="mal-nakli-sigortalari.html">Mal Nakli Sigortaları </a></li>
<li><a href="nakliyat-sorumluluk-sigortalari.html">Nakliyat Sorumluluk Sigortaları</a></li>
<li><a href="deniz-araclari-sigortasi.html">Deniz Araçları Sigortası </a></li>
</ul></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Mühendislik Sigortaları </a>
<ul class="dropdown-menu">
<li><a href="elektronik-cihaz-sigortasi.html">Elektronik Cihaz Sigortası </a></li>
<li><a href="makina-kirilmasi-sigortasi.html">Makina Kırılması Sigortası</a></li>
<li><a href="insaat-sigortasi.html">İnşaat Sigortası</a></li>
</ul></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Sağlık Sigortaları </a>
<ul class="dropdown-menu">
<li><a href="saglik-sigortasi.html">Sağlık Sigortası </a></li>
<li><a href="tamamlayici-saglik-sigortasi.html">Tamamlayıcı Sağlık Sigortası</a></li>
</ul></li>
</ul>
</li>
<li><a href="servisler.html"> Servisler </a></li>
<li><a href="kariyer.html"> Kariyer </a></li>
<li><a href="iletisim.html"> İletişim </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
您可以测试我的代码。
答案 0 :(得分：3)
您需要为下拉切换创建一个mouseenter函数，然后为下拉菜单和下拉菜单创建一个mouseleave函数。如果我正确理解你的问题。所以你的代码应该看起来像我想的那样。
$('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');
}
}
});
以下链接指向工作Fiddle的小提琴。
只是为了让你知道你的菜单可能会遇到一些问题，因为当鼠标离开下拉菜单和子菜单时菜单会关闭，所以他们无法向下滚动查看所有链接但是如果我理解你的问题，我认为这应该可以解决你的问题。
P.S我把事件留在那里，以防你需要执行一个事件，但如果没有，你可以把它拿出去。