0

我对 Jquery 水平菜单保持打开有疑问。谁能给我一个提示？如果您打开子菜单，我希望它保持打开状态，直到您“鼠标离开”该区域。

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>
4

3 回答 3

2

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

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

看看jQuery hover信息。

如果这不起作用，请发布一些URL。

于 2013-06-03T19:07:22.843 回答
1

更改mouseenter为mouseover。

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

于 2013-06-03T19:06:33.497 回答
1

将您的子菜单安排在主菜单项中，建议您不要使用 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();
   });
});

演示

Style your menu items accordingly.

于 2013-06-03T19:25:12.483 回答