我正在开发自己的 jQuery 导航菜单,但遇到了一些问题,因为一旦焦点从主导航菜单上的选择移开,子菜单就会消失。我知道必须有一个简单的解决方案,但我花了几个小时在这上面,并认为是时候寻求一些帮助了。
下面是代码:
jQuery:
$(document).ready(function() {
$('.myMenu li ul').hide(); //hide all sub menus
$('.myMenu > li').mouseenter(function() {
$(this).find('ul').stop(true, true).fadeIn("fast");
});
$('.myMenu > li').mouseout(function() {
$(this).find('ul').stop(true, true).fadeOut("fast");
});
});
HTML:
<div id="navigation">
<ul class="myMenu">
<li><a href="#">Main 1</a></li>
<li><a href="#">Main 2</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
<li><a href="#">Sub 5</a></li>
<li><a href="#">Sub 6</a></li>
<li><a href="#">Sub 7</a></li>
<li><a href="#">Sub 8</a></li>
<li><a href="#">Sub 9</a></li>
</ul>
</li>
<li><a href="#">Main 3</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Main 4</a></li>
<li><a href="#">Main 5</a></li>
<li><a href="#">Main 6</a></li>
<li><a href="#">Main 7</a></li>
<li><a href="#">Main 8</a></li>
</ul>
</div>
如有任何帮助,我们将不胜感激!
最佳答案
这只是将上面的代码转换为 the .hover()
method 的正确格式。它可以方便地将 mouseenter
和 mouseleave
组合到一个方法中。
$('.myMenu > li').hover(
function() {
$(this).find('ul').stop(true, true).fadeIn("fast");
},
function() {
$(this).find('ul').stop(true, true).fadeOut("fast");
});
按照你的描述,问题似乎已经解决了。当您位于相应的子菜单中时,“Main 2”和“Main 3”保持打开状态。
关于jQuery 导航菜单 - 子菜单在 MouseOut 时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7969854/