摺疊時移動按鈕展開

-1

所以我有讓我的列表下拉並備份的代碼。現在我希望按鈕能夠同時使用它。我設法讓它降低，但備份不太好。我試圖在列表中添加一個普通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'); 
    }); 
});

來源

2012-07-27 user1535882

你應該將你的代碼移動到jsfiddle中 – Jared 2012-07-27 21:55:22

爲什麼不把你的按鈕放在最下面，以便它隨着列表的末尾移動？ – Chad 2012-07-27 22:14:09