0
我這裏有一個小問題，保持子菜單顯示，同時鼠標懸停
我有一個菜單，我想，以顯示與類.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/
有誰可以給我個忙嗎？
謝謝
謝謝你的支持Nathaniel Flick;首先....你確定我的jsfiddle不起作用嗎？我的同事檢查了他的電腦，看起來很好。 https：// jsfiddle。淨/ yLpLfp9w/1/ 我覺得你的例子是什麼我想要實現太複雜了，如果你看看，這個問題不顯示的子菜單，做到這一點，我無法實現的就是保持可見盒我正在顯示它們 –
我在使用最新的FF的Mac上，除了黑條之外什麼都看不到，沒有鏈接顯示。我的解釋討論瞭如何保持懸停，確保在離開主ul時選擇ul元素和只有鼠標懸停。一旦我可以運行它，我可以用你的實際代碼做更多的事情。 –
給我一點點，我看你沒有的jQuery在你的提琴跑，我補充說，然後將更新我的回答，以滿足您的需求。 –