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'，它会更加顺畅，只需在定义切换后设置切换到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

我刚刚添加到.rounded-list以下的css：

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

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

：

更新小提琴：Fiddle

Answer 2

这些框都是扩展的，因为您定义了：

.rounded-list {
    ...
    div {
        display: block;
    }
    ...
}

优先于display: none中定义的.bounce-summary，因为前面提到的选择器更具体。

Answer 3

我会告诉你问题是什么：

当您向div添加保证金时，它会添加到所有div。

因此，当您尝试单击以获得反弹效果时，生成的div将在顶部和底部以及已存在的原始div上具有边距。

添加了

    li{
        margin: .5em 0;
    }

    .bounce-summary{
        margin-top: 10px;
    }

并从div删除了保证金。

小提琴here

获取jQuery下拉列表以正常加载和删除

3 个答案:

更新1