隱藏並顯示在按鈕上的列表點擊

我想隱藏並顯示某個列表。但它不起作用。我正在使用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(); 
});

這是所有的代碼，我想隱藏並顯示來自某個點和下面的列表項。當我再次點擊時，我想再次展示給他們。

來源

2012-07-27 user1535882

請它添加到[的jsfiddle（http://www.jsfiddle.net）*。它更容易幫助你。 – axcdnt 2012-07-27 20:20:24

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

來源

2012-07-27 20:27:21

太棒了，不知道'gt（）'僞選擇器！ – alexvance 2012-07-27 20:33:34

非常感謝 – user1535882 2012-07-27 21:39:38

這是工作的罰款：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:。

來源

2012-07-27 20:31:41 alexvance

像這樣的東西？

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

來源

2012-07-27 20:35:26 nickaknudson

隱藏並顯示在按鈕上的列表點擊

回答

相關問題