1

我正在开发自己的 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>

任何帮助将不胜感激！

4

2 回答 2

2

这只是将您上面的确切代码转换为该方法的正确格式，该.hover()方法可以方便地组合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”保持打开状态。

http://jsfiddle.net/Zr5ca/1

于 2011-11-01T22:33:20.677 回答
1

这是我为使您的问题更容易而做的事情。http://jsfiddle.net/raynesax/GWvVj/5/

于 2011-11-01T19:34:36.467 回答