Question

我遇到了Jquery水平菜单保持打开的问题。谁能给我一个暗示？如果你打开子菜单，我希望它保持打开状态，直到你的鼠标离开＆＃34;该地区。

JS

$(document).ready(function () {
    $("#meist").mouseleave(function () {
        $("#submeist").hide();
        return false;
    });

    $("#meist").mouseenter(function () {
        $("#submeist").show();
        return false;
    });

    $("#seadmed").mouseleave(function () {
        $("#subseadmed").hide();
        return false;
    });

    $("#seadmed").mouseenter(function () {
        $("#subseadmed").show();
        return false;
    });
});

HTML

    <ul id="menüü">  
            <li id="meist">  
                <p><a href="meist.html">Meist</a></p>  
            </li> 
            <li id="seadmed">  
                <p><a href="seadmed.html">Seadmed</a></p>  
            </li> 
           <li id="tooted">  
                <p><a href="tooted.html">Tooted</a></p>  
            <li id="hooldus">  
                <p><a href="tooted.html">Tooted</a></p> 
            </li>
         <li id="kontakt">  
                <p><a href="kontakt.html">Kontakt</a></p> 
            </li>
        </ul>

<div id="submenu">
    <ul id="submeist">
        <li class="asi1">
            Asi 1
        </li>
        <li class="asi2">
            Asi 2
        </li>
        <li class="asi3">
            Asi 3
        </li>
    </ul>

    <ul id="subseadmed">
        <li class="item1"> 
            Item 1 </li>
        <li class="item2"> 
            Item 2 
        </li>
        <li class="item3"> 
            Item 3 
        </li>
    </ul>
</div>

Answer 1

由于您的子菜单不是菜单的子项，因此您应该尝试将每个bindind更改为：

$('#menu, #submenu').hover(fnOnHover, fnOnOut)

查看jQuery hover信息。

如果不能解决问题，请发布一些网址。

Answer 2

将mouseenter更改为mouseover。

这是一个显示行为的答案：Jquery mouseenter() vs mouseover()

Answer 3

将您的子菜单放在主菜单项中，建议您不要使用ID，最终会为每个菜单以及子菜单和每个菜单的处理程序创建ID。使用一个类，只使用一个处理程序，而不是为每个处理程序创建多个处理程序。

HTML

<ul id="menüü">
    <li class="menu">
        <p><a href="meist.html">Meist</a>

        </p>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <p><a href="seadmed.html">Seadmed</a>

        </p>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>

JS

$(document).ready(function () {
    $(".menu").on('mouseenter mouseleave', function () { // Same as $(".menu").hover(...
        $(this).find(".submenu").toggle();
   });
});

Demo

相应地设置菜单项的样式。

jQuery菜单不会保持打开状态

3 个答案:

HTML

JS

Demo