隱藏和顯示按鈕列表

所以我有一個無序列表與一些列表項。我想通過使用按鈕來顯示和隱藏列表項的第n個子項。隱藏和顯示按鈕列表

我試過使用：將鼠標懸停在按鈕上，但它不會迴應。這是因爲它的按鈕？看看代碼。 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:nth-child(11) { 
    visibility:hidden 
} 

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

a.button:hover div#right-column-sidebar ol li:nth-child(11){visibility:visible} {}

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

我願意嘗試一些JS以及和這將是很好的補充負載效應

來源

2012-07-27 user1535882

你想一個onclick JavaScript的甚至是隱藏在點擊觸發列表一樣簡單那。 – RSM 2012-07-27 14:40:26

如果可能，我想避免使用jS。使用可見性：隱藏/可見，而不是當懸停在按鈕上時 – user1535882 2012-07-27 14:41:55

如果您考慮JS/jQUery：http://jsfiddle.net/cy4f3/ – rsplak 2012-07-27 14:43:09

當您使用jQuery（如其他人所說），你可以這樣做，因爲這

$('#nth_item_button').click(function() { $('ul#my_ul li:nth-child(3)').toggle(); });

來源

2012-07-27 14:50:03 tigertrussell

CSS只能躲在秀子和同級元素使用:hover。你的HTML結構不支持這個。您將需要使用JavaScript。

來源

2012-07-27 14:48:03

查找jQuery的。點擊（）。每個（），以及.EQ（）方法。 jQuery非常易於使用，跨瀏覽器兼容，你可以看看他們的效果頁面，並玩弄各種東西（淡入淡出，滑動等）。

jQuery.com

來源

2012-07-27 14:48:10

隱藏和顯示按鈕列表

回答

相關問題