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

我有一个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);
        }
    }
}); 

我想在hover上实现同样的功能，但它不起作用。它要么不打开子菜单，要么不打开其他各种东西，这是我尝试过的一个明显的例子：

$("#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>

也许可以试试：

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

您可能还想看看您在代码段中使用的一些jQuery选择器——如果您能够添加它们，可能是元素上的一些类，而不是嵌套的选择器，将它们缓存在变量中会更好地提高性能和重用性。

也许可以尝试：

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

您可能还想看看您在代码段中使用的一些jQuery选择器——如果您能够添加元素上的一些类，而不是嵌套的选择器，那么将它们缓存在变量中会更好地提高性能和重用性。

请尝试以下代码：

$("#nav_evnavmenu > li > a").on('mouseenter', 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").on('mouseenter', 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);
        }
    }
});

当您想要隐藏或滑动子菜单时，可以编写或自定义相同内容

---

希望这有帮助

您可以将多个事件与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");
    }
});

---

您可以将多个事件与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");
    }
});

---

您也可以共享html吗？当然，添加了一些html。Hover将触发输入和输出事件。你想要鼠标或鼠标盖。我还建议使用

.on（）

而不是直接事件监听器，因为我认为这些监听器已经过时了。mouseover工作起来很有魅力，谢谢！你知道我将鼠标移出子菜单后如何关闭子菜单吗？你也可以共享html吗？当然，添加了一些html。Hover将触发输入和输出事件。你想要鼠标或鼠标盖。我还建议使用

.on（）

而不是直接事件监听器，因为我认为这些监听器已经过时了。mouseover工作起来很有魅力，谢谢！你知道在鼠标移出子菜单后如何关闭子菜单吗？这很有效，谢谢！还有一个问题，你知道我如何让子菜单关闭菜单中的mouseout吗？请参阅下面的进一步答案，使用on…将mouseout与事件绑定在一起，这很有效，谢谢！还有一个问题，你知道如果mouseout出现在菜单中，我该如何让子菜单关闭？请参阅下面的进一步答案，使用on…mouseover将mouseout与事件绑定在一起，效果非常好，谢谢！你知道我鼠标移出子菜单后如何关闭子菜单吗？鼠标器工作得很好，谢谢！你知道在鼠标移出子菜单后如何关闭子菜单吗？