0

我这里有这个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;
}

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

4

3 回答 3

1

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

于 2013-03-21T19:55:15.430 回答
0

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

.stop('true',true, true)

http://jsfiddle.net/mCPvp/

更新：似乎 gatebasher_311 比我快 45 秒 :)

于 2013-03-21T20:16:21.730 回答
0

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

pillars-body div {
    margin-top: 10px;
}
于 2013-03-21T19:56:15.123 回答