隐藏和显示按钮列表

所以我有一个无序列表与一些列表项。我想通过使用按钮来显示和隐藏列表项的第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

隐藏和显示按钮列表

回答

相关问题