0

だから私はいくつかのリストアイテムを含む順序付けられていないリストを持っています。ボタンを使用して、リストアイテムのn番目の子を表示および非表示にします。

ボタンの上に：hoverを使用してみましたが、応答しません。これはボタンだからですか？コードを見てください。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を試してみるつもりです、そしてそれはローディング効果を加えるのがいいでしょう

4

3 に答える 3

0

（他の人が示唆しているように）jQueryを使用すると、これと同じくらい簡単なことができます

$('#nth_item_button').click( function() { $('ul#my_ul li:nth-child(3)').toggle(); } );
于 2012-07-27T14:50:03.253 に答える
0

CSSは、を使用して子要素と兄弟要素の表示のみを非表示にでき:hoverます。HTML構造はこれをサポートしていません。JavaScriptを使用する必要があります。

于 2012-07-27T14:48:03.813 に答える
0

jQueryの.click（）、.each（）、および.eq（）メソッドを検索します。jQueryは本当に使いやすく、クロスブラウザー互換であり、その効果ページを見て、あらゆる種類のもの（フェード、スライドなど）を試すことができます。

jQuery.com

于 2012-07-27T14:48:10.320 に答える