如果父级处于活动状态，则 jQuery 下拉菜单应展开

Question

我正在 jQuery 中制作一个简单的下拉菜单。它工作正常。不过我遇到了问题。

问题是，我需要保持活动页面下拉菜单处于展开状态 在下面的示例中，具有 .inpath 父级的子菜单需要始终保持展开状态。如果您将鼠标悬停在另一个菜单项上，它应该显示相关的子页面，当您将鼠标悬停时返回以显示活动的子页面。非常感谢任何帮助:-)！

我的html：

<div id="menu">

            <ul>

                <li><a href="">Hvem</a></li>
                <li><a href="">Hvad</a>
                    <ul>
                    <li><a href="">Produkter</a></li>
                    <li><a href="">Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath"><a href="">Hvordan</a>

                    <ul>

                        <li><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>

我的 jQuery：

 <script type="text/javascript">
        //mouseenter, mouseover, hover
        // mouseleave, mouseout,
    $(document).ready(function () { 
        $('#menu ul li ul').hide();
        $('#menu li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(100);

            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(100);         
            }
        );

    });

        </script>

Answer 1

尝试从原始hide() 和hover() 中删除.inpath。您还需要使用>（直接后代选择器）进行更具体的选择。

$(document).ready(function() {
    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu > ul > li:not(.inpath)').hover(

    function() {
        $('ul', this).slideDown(100);
        $('#menu li.inpath ul').hide();
    }, function() {
        $('ul', this).slideUp(100);
        $('#menu li.inpath ul').show();
    });
});

http://jsfiddle.net/MGkQC/7/