Question

我会尽力表达这一点，希望很清楚。

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

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

我的问题是，如果你将鼠标悬停在最上面的内容区域，一切都很好，但如果你向下移动光标探索第二个内容区域（两个当前都是打开的），它们都会崩溃。

我的问题是，有人可以向我解释我需要做些什么，以便每个开放的内容区域保持开放，无论用户当前正在使用什么内容区域。

这是标记的一个例子：

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

相对的CSS：

ul {
    position: relative;
    z-index: 10;
    width: 100%;
}

li {
    display: inline;
}

.dropdown-contact, .dropdown-artists {
    display: none;
    position: relative;
    z-index: 1;
    width: 100%;
}

.big-intro-c, .big-intro-a {
    position: absolute;
    opacity: 1;
    z-index: 5;
}

.dc-content, .da-content {
    position: relative;
    opacity: 0;
    z-index: 10;
}

这是我的.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)
            });
        });
    });
});

我已经包含了一个小提琴：http://jsfiddle.net/LrCTA/8/虽然似乎有些东西我无法在我的制作网站上镜像：http://ericbrockmanwebsites.com/我认为那里有什么，确实显示了这个问题。

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

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

0 个答案: