Question

我目前正在制作两级菜单。这是我的代码 - 菜单结构。当我将鼠标悬停在父级1上时，我希望显示具有相同ID的底部ul。我制作了jquery代码，但我遇到了mouseleave的问题。

HTML结构

<section id="top-nav">
    <nav>
        <ul>
            <li data-href="menu-id-1">
                <a href="">Parent 1</a>
            </li>

            <li data-href="menu-id-2">
                <a href="">Parent 2</a>
            </li>

            <li data-href="menu-id-0">
                <a href="">Parent 3</a>
            </li>
        </ul>
    </nav>
</section>

<section id="bottom-nav">
     <nav>
        <ul class="child-ul" id="menu-id-1">
            <li>
                <a href="#">Parent 1 Children li</a>
            </li>

            <li>
                <a href="#">Parent 1 Children li</a>
            </li>

            <li>
                <a href="#">Parent 1 Children li</a>
            </li>

            <li>
                <a href="#">Parent 1 Children li</a>
            </li>

            <li>
                <a href="#">Parent 1 Children li</a>
            </li>
        </ul>

        <ul class="child-ul" id="menu-id-2">
            <li>
                <a href="#">Parent 2 Children li</a>
            </li>

            <li>
                <a href="#">Parent 2 Children li</a>
            </li>

            <li>
                <a href="#">Parent 2 Children li</a>
            </li>

            <li>
                <a href="#">Parent 2 Children li</a>
            </li>

            <li>
                <a href="#">Parent 2 Children li</a>
            </li>

            <li>
                <a href="#">Parent 2 Children li</a>
            </li>
        </ul>
    </nav>
</section>

jQuery（代码很乱，但我尝试了不同的方法）

 $(function () {
     $("#top-nav ul li").mouseover(function (e) {
         e.preventDefault();
         data = $(this).attr("data-href");
         $("#" + data).css("display", "block").addClass('ul-active');
         $(this).children().addClass("active");
         active = true;

     }).mouseleave(function () {
         liactive = this;

         $(".ul-active").mouseleave(function () {
             $("#" + data).css("display", "none").removeClass('ul-active');
             $(liactive).children().removeClass("active");
         });
         $("#bottom-nav").not().mouseleave(function () {
             $("#" + data).css("display", "none").removeClass('ul-active');
             $(liactive).children().removeClass("active");
         });
         if ($(liactive).attr("data-href") == 'menu-id-0') {
             $(liactive).children().removeClass("active");
         }
     });
 });

我知道这很简单，但我找不到正确的方法而且我有点累，所以我想我认为不合适。

Answer 1

你可以使用这样的东西。我认为没有必要使用mouseleave separetely，你可以在hover（）中传递一个函数，如下面的代码。悬停（功能（e），功能（e））。这里首先是悬停，第二个是mouseleave。

$(".yourselectorbyclass").hover(function(e) {
  var timeout = $(this).data("timeout");
  e.stopPropagation();

  if(timeout) clearTimeout(timeout);

  $(".yourselectortoshow").show();

 //your code here

}, function() {
    $(this).data("timeout", setTimeout($.proxy(function(e) {
    $(".yourselectortoshow").hide();
    //your code here
    }, this), 100));
});

Answer 2

您可以在主菜单的mouseover处理程序中隐藏之前显示的第二个菜单要隐藏当前显示的第二个菜单，您可以使用$(document).on("mouseleave", ".ul-active"。

Fiddle

$(function()
{
    $("#top-nav ul li").mouseover(function()
    {
        hideSecondMenu();
        var data = $(this).attr("data-href");
        $("#" + data).addClass('ul-active');
        $(this).children().addClass("active");
        return false;
    });

    $(document).on("mouseleave", ".ul-active", function()
    {
        hideSecondMenu();
    });

    function hideSecondMenu()
    {
        $(".ul-active").removeClass('ul-active');
        $("#top-nav ul li .active").removeClass("active");
    }
});

CSS：

#top-nav ul li
{
    display: inline
}

.child-ul
{
    display: none;
}

.active
{
    color: red;
}

.ul-active
{
    display: block;
}

带有jQuery的两级菜单

2 个答案: