javascript - 向下滑动后 jQuery 菜单缺少顶部

Question

我这里有 fiddle ，它非常接近我想要的，但是有几个问题。首先，一旦菜单达到全高，内部菜单的顶部就会消失。其次，如果您在菜单转换时将鼠标移入和移出菜单，它就会……停止。 (我想要的是，当您重新进入它时，它只会在您的鼠标停留期间向外展开，并在您的鼠标退出后恢复收缩)。

如果我去掉 .stop()，那么它会做一些跳舞的事情，而不是我提到的我想要的。

编辑:顶部缺失的部分已通过向 pillars-body 添加一些填充来修复(任何填充，即使它不影响 View ，也会修复它。奇怪)。但是，当我重新进入菜单时，菜单仍然会停止，因为它正在折叠。

进一步编辑:修复了菜单只是通过切换到 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，您应该得到您想要的。