Question

我有一个html导航菜单，可以点击这样打开子菜单......

$("#nav_evnavmenu > li > a").click(function () { // binding onclick
    if ($(this).parent().hasClass('selected')) {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");
    } else {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");

        if ($(this).next(".subs").length) {
            $(this).parent().addClass("selected"); // display popup
            $(this).next(".subs").children().slideDown(200);
        }
    }
});

我想在悬停时达到同样的效果，但它不起作用。它要么不打开子菜单，要么打开各种其他东西，这是我尝试过的一个显而易见的事情：

$("#nav_evnavmenu > li > a").hover(function () { // detect hover
    if ($(this).parent().hasClass('selected')) {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");
    } else {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");

        if ($(this).next(".subs").length) {
            $(this).parent().addClass("selected"); // display popup
            $(this).next(".subs").children().slideDown(200);
        }
    }
});

我也尝试过：

$("#nav_evnavmenu > li > a").hover(function () { // detect hover
    $(this).click();
});

任何帮助都将不胜感激。

编辑：以下是一些HTML：

<div class="menu_evnavmenu">
    <span>
        <ul id="nav_evnavmenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li><h3>1</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="sep"></p>
                        <ul>
                            <li><h3>2</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                            <li><h3>3</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="#">Menu 2</a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li><h3>1</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="sep"></p>
                        <ul>
                            <li><h3>2</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                            <li><h3>3</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </span>
</div>

以下是鼠标离开菜单时关闭菜单的方法：

$('.wrp2').on('mouseleave', function(e) { // close menu on mouseout
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");
});

Answer 1

也许试试：

$('#nav_evnavmenu > li > a').on('mouseover click', function(e) {
    e.stopPropagation();
    // do your action on mouseover and click
});

你可能还想看一下你在你的代码片段中使用的那些jQuery选择器中的一些 - 如果你能够添加它们，而不是嵌套的选择器，并且缓存它们，可能还有一些关于元素的类在变量中，性能和重用性会更好。

Answer 2

请尝试以下代码：

{{1}}

如果要隐藏或滑动子菜单，可以编写或自定义相同内容。

希望这有帮助！

Answer 3

您可以在jquery中使用on方法的多个事件：

$('#nav_evnavmenu > li > a').on({
    'click mouseover': function(e) {
        e.stopPropagation();
       // do your action on mouseover and click
    },
    'mouseout': function(e) {
        e.stopPropagation();
        // do your action for when mouse leaves element
        $("#nav_evnavmenu .selected div div").slideUp(100);
        $("#nav_evnavmenu .selected").removeClass("selected");
    }
});

如何在不点击的情况下保持子菜单打开

3 个答案: