붕괴시 버튼을 아래로 내림

Question

그래서 내 목록을 드롭 다운하고 백업하는 코드가 있습니다. 이제 버튼을 두 가지 방법으로 함께 사용하겠습니다. 나는 그럭저럭 그것을 쓰러 뜨릴 수 있었다. 그러나 백업은 그렇게 좋지 않았다. 단추를 일반적인 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'); 
    }); 
}); 

Answer 1

이 비슷한 무언가를 원하십니까이다 210?

버튼이 ol의 크기 변화를 인식/응답하도록 ol에서 position: absolute을 삭제했습니다.

"slowmotion effect"를 얻으려면 jquerys 토글 함수 (3000 = 3s)의 인수로 숫자를 전달하면됩니다. 작동하지만 효과는 없습니다. 보통 CSS 전환/애니메이션으로 나만의 효과를 만듭니다.