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

Answer 2

这很好：http://jsfiddle.net/zn55e/1/。我的猜测是你要么没有正确加载jQuery，要么你通过在Javascript中指定nth-child(1n)来强迫自己 - 如果你想要第一个项目，nth-child(1)是正确的用法。

PS：关闭margin-left处的div#right-column-sidebar ol li:nth-child(11){margin-left:行。

Answer 3

这样的东西？

http://jsfiddle.net/nickaknudson/fkqgz/

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

3 个答案: