Javascript 如何一次打开所有子菜单项？

我将尽我最大的努力来表达这一点，希望它是清楚的

我有一个导航菜单和一系列菜单项。当您将鼠标悬停在某个菜单项上时，关联的内容区域会向下滑动到视图中。当鼠标离开内容区域时，它会滑回视图之外

如果用户决定在一个内容区域已打开时将鼠标悬停在另一个菜单项上，则第二个关联的内容区域也会滑入查看。因此，在这种情况下，两个内容区域仍然是开放的，彼此堆叠在一起

我的问题是，如果您将鼠标悬停在最上面的内容区域上，一切都很好，但是如果您向下移动光标以浏览第二个内容区域（这两个区域都当前处于打开状态），它们都会崩溃

我的问题是，是否有人能向我解释一下，为了让每个开放的内容区域保持开放，我需要做些什么，而不管用户当前使用的是什么内容区域

下面是一个标记示例：

<ul>
    <li id="menu-item-1">contact</li>
    <li id="menu-item-2">artists</li>
</ul>

<div class="dropdown-contact">
    <p class="big-intro-c">contact</p>
    <div class="row dc-content">
        contact content
    </div> <!-- .row .dc-content -->
</div> <!-- .dropdown-contact-->

<div class="dropdown-artists">
    <p class="big-intro-a">artists</p>
    <div class="row da-content">
        artists content
    </div> <!-- .row .da-content -->
</div> <!-- .dropdown-artists-->

以下是我的.js道歉-我仍在学习：

$(function () {
    $(document).on("mouseenter", "#menu-item-1, .dropdown-contact", function () {
        $(".dropdown-contact").stop().slideDown(500, function() {
            $(".big-intro-c").stop().fadeTo(200, 0, function() {
                $(".dc-content").stop().fadeTo(200, 1)
            });
        });
    });

    $("#menu-item-1, .dropdown-contact").not('#menu-item-1').mouseleave(function () {
        $(".dc-content").stop().fadeTo(500, 0, function() {
            $(".dropdown-contact").stop().slideToggle(500, function() {
                $(".big-intro-c").stop().fadeTo(1000, 1)
            });
        });
    });
});

$(function () {
    $(document).on("mouseenter", "#menu-item-2, .dropdown-artists", function () {
        $(".dropdown-artists").stop().slideDown(500, function() {
            $(".big-intro-a").stop().fadeTo(200, 0, function() {
                $(".da-content").stop().fadeTo(200, 1)
            });
        });
    });

    $("#menu-item-2, .dropdown-artists").not('#menu-item-2').mouseleave(function () {
        $(".da-content").stop().fadeTo(500, 0, function() {
            $(".dropdown-artists").stop().slideToggle(500, function() {
                $(".big-intro-a").stop().fadeTo(1000, 1)
            });
        });
    });
});

我已经包括了一个提琴：虽然似乎有一些东西我不能从我的生产现场反映出来：但我认为那里的东西确实显示了问题

---

像往常一样，提前感谢您提供的任何见解。

难道没有开源库已经做到了这一点吗？@RobertHarvey，也许吧，但我喜欢用艰苦的方式来做，因为这有助于我的学习。此外，这个客户对他们希望事情如何运作有一些非常好的替代想法，这是针对一个有问题的电子音乐标签。当然，但是你可以通过查看他们的代码来得到一些关于其他人如何运作的提示。@RobertHarvey干杯，也许这是一个很好的起点。

$(function () {
    $(document).on("mouseenter", "#menu-item-1, .dropdown-contact", function () {
        $(".dropdown-contact").stop().slideDown(500, function() {
            $(".big-intro-c").stop().fadeTo(200, 0, function() {
                $(".dc-content").stop().fadeTo(200, 1)
            });
        });
    });

    $("#menu-item-1, .dropdown-contact").not('#menu-item-1').mouseleave(function () {
        $(".dc-content").stop().fadeTo(500, 0, function() {
            $(".dropdown-contact").stop().slideToggle(500, function() {
                $(".big-intro-c").stop().fadeTo(1000, 1)
            });
        });
    });
});

$(function () {
    $(document).on("mouseenter", "#menu-item-2, .dropdown-artists", function () {
        $(".dropdown-artists").stop().slideDown(500, function() {
            $(".big-intro-a").stop().fadeTo(200, 0, function() {
                $(".da-content").stop().fadeTo(200, 1)
            });
        });
    });

    $("#menu-item-2, .dropdown-artists").not('#menu-item-2').mouseleave(function () {
        $(".da-content").stop().fadeTo(500, 0, function() {
            $(".dropdown-artists").stop().slideToggle(500, function() {
                $(".big-intro-a").stop().fadeTo(1000, 1)
            });
        });
    });
});