Question

我在这里有fiddle，它与我想要的非常接近，但有几个问题。首先，菜单达到其全高后，内部菜单的顶部会消失。其次，如果你在转换过程中将鼠标移入和移出菜单，它只是...停止。（我想要的是当你重新进入它时，它会在鼠标停留期间向外扩展，并在鼠标退出后恢复折叠）。

如果我摆脱了.stop（），那么它会做一个跳舞的事情，而不是我想要的那样。

编辑：通过向柱子体添加一些填充来修复顶部缺失（任何一个，即使它不影响视图，也修复它。奇怪）。但是，当我重新进入时，菜单仍然停止，因为它正在崩溃。

进一步编辑：通过切换到slideToggle而不是slideUp和slideDown来修复菜单停止。

这是html：

<div id="mission-statement-container">
<div class="pillars">
    <div class="pillars-body">
        <div><span class="pillar-indicator"></span><span class="pillar-text">First Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Second Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Third Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Fourth Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Fith Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Sixth Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Seventh Pillar</span>
        </div>
        <div><span class="pillar-indicator"></span><span class="pillar-text">Eighth Pillar</span>
        </div>
    </div>
    <div class="pillars-demo">PILLARS</div>
</div>

和javascript：

$(".pillars-body").hide();
$(".pillars").hover(function () {
    $(".pillars-body").stop().slideDown();
}, function () {
    $(".pillars-body").stop().slideUp();
});

用于衡量标准的CSS：

.pillar-indicator {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin-left: 20px;
    margin-right: 15px;
    background: yellow;
    }
.pillars-body {
    background: black;
    color: white;
}
.pillars-body div {
    margin-top: 10px;
}
.pillars {
    position: absolute;
    top: 0;
    left: 0;
}
.pillars-demo {
    float: left;
}

进一步说明：我刚刚注意到，如果你在鼠标扩展时将鼠标移出菜单，然后在它折叠并再次展开后再回到它，那么它一旦完全展开就不会隐藏顶部扩展，如果这意味着什么。

Answer 1

如果你向.pillars-body添加一些padding-top，你应该得到你想要的东西。

Answer 2

它丢失了，因为如果这个类：

pillars-body div {
    margin-top: 10px;
}

Answer 3

您可以尝试将以下参数添加到stop方法以修复动画：

.stop('true',true, true)

http://jsfiddle.net/mCPvp/

更新：看来gatebasher_311在45秒内打败了我：）

滑动后jQuery菜单缺少顶部

3 个答案: