【发布时间】：2017-04-30 00:01:37
【问题描述】：
这里有个小问题，
我有一个菜单，我想在 .submenuWrap 类的 div 中显示子菜单。如果菜单项有子菜单，它会在这个.submenuWrap 中显示子菜单，如果菜单项没有子菜单，则.submenuWrap 根本不会显示。
我不知道该怎么做是在我在子菜单中移动时保持这个 .submenuWrap 显示，因为目前，一旦我离开导航，它就会消失。
我把所有东西都放在一个 jsfiddle 中，因为它更容易理解：
html
<nav id="mainNav" role="navigation">
<div class="container">
<div id="mainMenu" class="collapse navbar-collapse">
<ul class="nav">
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Buy Wine</a>
<div class="dropdown-menu">
<div class="col-sm-3 col-xs-12">
<dl>
<dt><a href="#">By Country</a></dt>
<dd><a href="#" data-abbr="ar">Argentina</a></dd>
<dd><a href="#" data-abbr="au">Australia</a></dd>
<dd><a href="#" data-abbr="it">Italy</a></dd>
<dd><a href="#" data-abbr="fr">France</a></dd>
<dd><a href="#" data-abbr="es">Spain</a></dd>
<dd><a href="#" data-abbr="gb">United Kingdom</a></dd>
</dl>
</div>
<div class="col-sm-3 col-xs-12">
<dl>
<dt><a href="#">By Type</a></dt>
<dd><a href="#">Red</a></dd>
<dd><a href="#">White</a></dd>
<dd><a href="#">Rose</a></dd>
<dd><a href="#">Sparkling</a></dd>
<dd><a href="#">Port</a></dd>
</dl>
</div>
<div class="col-sm-3 col-xs-12">
<dl>
<dt><a href="#">By Something</a></dt>
<dd><a href="#">Red</a></dd>
<dd><a href="#">White</a></dd>
<dd><a href="#">Rose</a></dd>
<dd><a href="#">Sparkling</a></dd>
<dd><a href="#">Port</a></dd>
</dl>
</div>
<div class="col-sm-3 col-xs-12">
<dl>
<dt><a href="#">By Price</a></dt>
<dd><a href="#">£0 - £50</a></dd>
<dd><a href="#">£50 - £100</a></dd>
<dd><a href="#">£100 - £200</a></dd>
<dd><a href="#">£200 - £500</a></dd>
<dd><a href="#">£500+</a></dd>
</dl>
</div>
</div>
</li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">en primeur</a>
<div class="dropdown-menu">
<div class="col-sm-6 col-xs-12">
<dl>
<dt><a href="#">PIRULO</a></dt>
<dd><a href="#" data-abbr="ar">Argentina</a></dd>
<dd><a href="#" data-abbr="au">Australia</a></dd>
<dd><a href="#" data-abbr="it">Italy</a></dd>
<dd><a href="#" data-abbr="fr">France</a></dd>
<dd><a href="#" data-abbr="es">Spain</a></dd>
<dd><a href="#" data-abbr="gb">United Kingdom</a></dd>
</dl>
</div>
<div class="col-sm-6 col-xs-12">
<dl>
<dt><a href="#">PIRULA</a></dt>
<dd><a href="#">Red</a></dd>
<dd><a href="#">White</a></dd>
<dd><a href="#">Rose</a></dd>
<dd><a href="#">Sparkling</a></dd>
<dd><a href="#">Port</a></dd>
</dl>
</div>
</div>
</li>
<li><a href="#">latest offers</a></li>
<li><a href="#">what's new</a></li>
<li><a href="#">our blog</a></li>
<li><a href="#">services</a></li>
</ul>
</div>
<div class="submenuWrap"></div>
</div>
</nav>
css
#mainNav {
background-color: $white;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
#mainMenu > ul {
display: table;
width: 100%;
margin-bottom: 0;
}
#mainMenu > ul > li {
display: table-cell;
}
#mainMenu > ul > li > a {
text-align: center;
}
.submenuWrap {
position: absolute;
background-color: khaki;
width: 98%;
border-left: 5px solid #333333;
border-right: 5px solid #333333;
background-color: $white;
margin: 0 auto;
top: 50px;
right: 0;
left: 0;
border-top: 0;
display:block;
z-index:6;
}
js
var submenu = $(this).next(".dropdown-menu").html();
$( "#mainMenu .dropdown-toggle" ).on({
mouseover: function() {
submenu = $(this).next(".dropdown-menu").html();
}, mouseenter: function() {
$(".submenuWrap").html(submenu).css("border-bottom", "5px solid black");
}, mouseleave: function() {
$(".submenuWrap").html("").css("border-bottom", "0");
}
});
我试过添加这个：
$( ".submenuWrap" ).on({
mouseover: function() {
$(this).css("display", "block");
}, mouseleave: function() {
$(this).css("display", "none");
}
});
但它什么也没做，我也不明白为什么。
https://jsfiddle.net/yLpLfp9w/
有人可以帮帮我吗？
谢谢
【问题讨论】：
标签： jquery html css mouseover mouseleave