Jquery 在折叠展开上向下移动按钮

因此，我有代码使我的列表下拉和备份。现在，我想让按钮同时显示两种方式。我设法把它弄下来了，但倒车不太好。我试图将按钮添加到列表的公共div中，但没有成功，因为在单击“时间”后按钮消失了。所以我真的想让它尽可能的风格化，如果可能的话，添加一个慢动作效果和加载效果会很棒

这是代码

Html

Jquery

$(function(){
    $('div#right-column-sidebar ol li:gt(9)').hide();
    $('a.button').click( function() { 
        $('div#right-column-sidebar ol li:gt(9)').toggle(); 
        $('a.button').addClass('change-height');
    });
});

---

你想要类似的东西吗

我从

ol

中删除了

位置：绝对

，因此按钮可以感知/响应

ol

尺寸的变化

---

要获得“slowmotion效果”，您只需传递一个数字作为jquerys切换函数（3000=3s）的参数-它可以工作，但这并不是imo可以获得的最佳效果。我通常使用css转换/动画创建自己的效果。

您应该将代码移动到JSFIDDLE中为什么不将按钮绝对放置在底部，所以它会随着列表的末尾移动？

div#right-column-sidebar{
    position: absolute; 
    right: -140px;
}

div#right-column-sidebar ol{
    position:absolute; 
    right: 150px;
    margin: 10px 0 10px 10px;
    font-size: 20px;
    color: red;
    list-style-type:none
}

div#right-column-sidebar ol li {
    list-style-type:none;
    margin: 10px 0 10px 0; 
    border-bottom: 1px dotted grey; 
    width: 200px; display: block;
}

div#right-column-sidebar ol li a{
    font-size: 60%; color: blue;margin-left: 20px
}
div#right-column-sidebar ol li:nth-child(11){
    margin-left:0;
}      
div#right-column-sidebar ol li a:hover{
    text-decoration: underline;
}

a.button {
    border: 1px solid lightgrey;no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

$(function(){
    $('div#right-column-sidebar ol li:gt(9)').hide();
    $('a.button').click( function() { 
        $('div#right-column-sidebar ol li:gt(9)').toggle(); 
        $('a.button').addClass('change-height');
    });
});