0

我将尽我所能表达这一点，希望它是清楚的。

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

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

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

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

这是标记的示例：

<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/我认为那里有什么，但是，确实显示了这个问题。

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

4

0 回答 0