Html 使用按钮隐藏和显示列表

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

---

我也愿意尝试一些jS，添加一个加载效果会很好

CSS只能使用

：hover
隐藏show child和sibling元素。您的HTML结构不支持此功能。您需要使用JavaScript。
查找jQuery的.click（）、.each（）和.eq（）方法。jQuery非常易于使用，跨浏览器兼容，您可以查看它们的效果页面并处理各种内容（褪色、滑动等）

jQuery.com
当您使用jQuery（正如其他人所建议的）时，您可以做如下简单的事情

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

你想要一个onclick javascript，甚至可以在点击时隐藏列表并触发它。如果可能的话，我想避免使用jS。使用可见性：当你考虑JS/jQuery时，隐藏/可见，而不是悬停在按钮上：你的代码> A.按钮< /代码>样式错误：<代码>边框：1PX Stand LeTeGy；无重复滚动右上角。。。。
$('#nth_item_button').click( function() { $('ul#my_ul li:nth-child(3)').toggle(); } );