javascript - 获取 jQuery 下拉列表以优雅地加载和删除

Question

我正在尝试让这个 jQuery 下拉菜单正常工作:http://jsfiddle.net/a2geG/2/

第一个问题是默认情况下两个 .bounce-summary div 元素都是打开的。我希望它们默认关闭并包含以下内容以实现这一点，但它似乎不起作用:

 .bounce-summary {
    width: 75%;
    height: 100px;
    background: #ccc;
    position: relative;
    display: none;
}

第二个问题是，当第一个 li 元素被点击时，底部的元素不会平滑过渡，但似乎也会跳动一点。我怎样才能防止这种行为？

谢谢!

Answer 1

尝试设置 easing: 'swing'，它使它更平滑，只需在定义 toggle 之后将 toggle 设置为 false 即可。 Fiddle

$(document).ready(function () {
    $("ol.rounded-list li").click(function () {
        $(this).find("div.bounce-summary").toggle("slide", {
            duration: 700,
            easing: 'swing',
            direction: 'up'
        });
    });
    $(this).find("div.bounce-summary").toggle(false);
});

更新1

我刚刚将以下 css 添加到 .rounded-list:

div.enumerate {
    display: block;
    margin: .5em 0;
}

从主 div 中删除 margin: .5em 0; 时:

更新 fiddle :Fiddle