javascript - 单击按钮时隐藏和显示列表

Question

我试图从某个点隐藏和显示列表。但它不起作用。我正在使用 jquery .toggle 来获得这种效果，但由于某种原因，列表项不会移动。确实需要对此进行解释以及为什么它不起作用。

CSS:

div#right-column-sidebar{position: absolute; top: 840px; 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:}      
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;
}

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>
<a class="button" href="#"><span>Show more</span></a>

JavaScript:

$('a.button').click( function() { 
    $('div#right-column-sidebar ol li:nth-child(1n)').toggle(); 
});

这就是所有代码，我想从一个点和更下方隐藏和显示列表项。当我再次点击时，我想再次显示它们。

Answer 1

试试这个 - http://jsfiddle.net/9HXzW/1/

$('div#right-column-sidebar ol li:gt(4)').hide();
$('a.button').on("click", function() {
    $('div#right-column-sidebar ol li:gt(4)').slideToggle();
});