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

Hide and Show list on buttonclick

本文关键字：显示 列表 隐藏 按钮 单击      更新时间：2024-03-18

我试图从某个点隐藏和显示列表。但它不起作用。我正在使用jquery.thoggle来获得这种效果，但由于某种原因，列表项不会移动。真的需要解释一下为什么它不起作用。

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

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

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

这运行良好：http://jsfiddle.net/zn55e/1/.我的猜测是，您要么没有正确加载jQuery，要么在Javascript中指定nth-child(1n)让自己感到奇怪——如果您要选择第一项，nth-child(1)是正确的说法。

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

类似的东西？

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

相关文章：