Jquery - 让所有其他菜单向上滑动

发布于 2024-08-28 11:46:45 字数 1319 浏览 1 评论 0原文

我有一个用 Jquery 制作的下拉菜单。

现在，如果您将鼠标悬停在所有菜单项上，它们的子菜单将同时显示。

我希望如果我将鼠标悬停在一个菜单上，然后转到下一个菜单，则上一个菜单的子菜单将滑回。就像现在一样，我必须将鼠标悬停在子菜单之外才能让它们向上滑动。

简而言之，当鼠标悬停在父菜单上时，向上滑动所有其他父菜单的子菜单（如果它们打开）。

$("#DropDownMenu li.parent").hover(function() {
        $(this).find(".subMenu").slideDown('fast').show();

        $(this).parent().find(".subMenu").hover(function() {
        }, function() {
            $(this).parent().find(".subMenu").slideUp('slow');
        });
    });

标记基本上是这样的，

<ul id="DropDownMenu">
<li class="parent"><a>Link1</a>
        <ul class="subMenu">
                <li><a>SubLink1</a></li>
                <li><a>SubLink2</a></li>
        <li><a>SubLink3</a></li>
        <li><a>SubLink4</a></li>
        </ul>
    </li>
<li class="parent"><a>Link2</a>
        <ul class="subMenu">
                <li><a>SubLink1</a></li>
                <li><a>SubLink2</a></li>
        <li><a>SubLink3</a></li>
        <li><a>SubLink4</a></li>
        </ul>
    </li>

原文

I have a drop down menu made with Jquery.

Right now, if you hover over all the menu items, their submenus will all show at the same time.

I would like that if I hover over one menu, then go to the next, that the previous menu's submenu will slide back up. As it is now, I have to hover out of the submenus for them to slide up.

To put it simpler, when hovering over a parent menu, slide up all other parent menu's submenus if they're open.

$("#DropDownMenu li.parent").hover(function() {
        $(this).find(".subMenu").slideDown('fast').show();

        $(this).parent().find(".subMenu").hover(function() {
        }, function() {
            $(this).parent().find(".subMenu").slideUp('slow');
        });
    });

The markup is basically like this,

<ul id="DropDownMenu">
<li class="parent"><a>Link1</a>
        <ul class="subMenu">
                <li><a>SubLink1</a></li>
                <li><a>SubLink2</a></li>
        <li><a>SubLink3</a></li>
        <li><a>SubLink4</a></li>
        </ul>
    </li>
<li class="parent"><a>Link2</a>
        <ul class="subMenu">
                <li><a>SubLink1</a></li>
                <li><a>SubLink2</a></li>
        <li><a>SubLink3</a></li>
        <li><a>SubLink4</a></li>
        </ul>
    </li>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬花如无物 2024-09-04 11:46:45

不太确定，也许将lideUp链接到slideDown？

查看此页面：http://jqueryfordesigners.com/ 关于 jquery 的非常好的播客。
你会在那里找到答案

回复收藏 0 原文

ま柒月 2024-09-04 11:46:45

我已经设法弄清楚了！通过使用 .siblings() 我可以向上滑动所有其他父级的子菜单。

$("#DropDownMenu li.parent").hover(
        function() {
            $(this).find(".subMenu").slideDown('fast');
            $(this).siblings().find(".subMenu").slideUp('slow');

            $(this).parent().find(".subMenu").hover(function() {
            }, function() {
                $(this).parent().find(".subMenu").slideUp('slow');
            });
        });

I've managed to figure it out! By using .siblings() I can slideUp all the other parent's submenu's.

$("#DropDownMenu li.parent").hover(
        function() {
            $(this).find(".subMenu").slideDown('fast');
            $(this).siblings().find(".subMenu").slideUp('slow');

            $(this).parent().find(".subMenu").hover(function() {
            }, function() {
                $(this).parent().find(".subMenu").slideUp('slow');
            });
        });

回复收藏 0 原文

~没有更多了~