折叠时移动按钮展开

问题描述：

所以我有让我的列表下拉并备份的代码。现在我希望按钮能够同时使用它。我设法让它降低，但备份不太好。我试图在列表中添加一个普通div中的按钮，但它不起作用，因为点击按钮后按钮消失了。所以我真的想把它作为风格尽可能的，如果可能的话，增加慢动作效果和加载效果会很棒。折叠时移动按钮展开

这里是代码再次

的Html

<div id="right-column-sidebar"> 
    <ol> 
     <li><a href="#">Title 1</a></li> 
     <li><a href="#">Title 2</a></li> 
     <li><a href="#">Title 3</a></li> 
     <li><a href="#">Title 4</a></li> 
     <li><a href="#">Title 5</a></li> 
     <li><a href="#">Title 6</a></li> 
     <li><a href="#">Title 7</a></li> 
     <li><a href="#">Title 8</a></li> 
     <li><a href="#">Title 9</a></li> 
     <li><a href="#">Title 10</a></li> 
     <li><a href="#">Title 11</a></li> 
     <li><a href="#">Title 12</a></li> 
     <li><a href="#">Title 13</a></li> 
     <li><a href="#">Title 14</a></li> 
     <li><a href="#">Title 15</a></li> 
     <li><a href="#">Title 16</a></li> 
     <li><a href="#">Title 17</a></li> 
     <li><a href="#">Title 18</a></li> 
     <li><a href="#">Title 19</a></li> 
     <li><a href="#">Title 20</a></li> 
    </ol> 
</div>

CSS

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; 
}

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'); 
    }); 
});

你应该将你的代码移动到jsfiddle中 – Jared 2012-07-27 21:55:22

为什么不把你的按钮放在最下面，以便它随着列表的末尾移动？ – Chad 2012-07-27 22:14:09

答

你想类似这种 - http://jsfiddle.net/7CxG8/？

我从ol中删除了position: absolute，因此按钮开始意识到/响应了ol尺寸的更改。

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

折叠时移动按钮展开

相关推荐