特定の時点からリストを非表示にして表示しようとしています。しかし、それは機能していません。この効果を得るために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();
});
それがすべてのコードであり、あるポイントからさらに下のリスト項目を非表示および表示したいと考えています。そして、もう一度クリックしたときにそれらを表示したいと思います。