24

私のページには次のHTMLがあります。

<ul id="detailsList">
    <li>
        <input type="checkbox" id="showCheckbox" />
        <label for="showCheckbox">Show Details</label>
    </li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
    <li>content ...</li>
</ul>

この HTML を変更できません。次の CSS を使用して、最初の LI を除いてすべての LI を非表示にしました

ul#detailsList li:nth-child(1n+2) {
    display:none;
}

ここまでは順調ですね。私が今やりたいことは、純粋な CSS を使用して、チェックボックスがオンになっているときに、これらの非表示の LI を表示することです。これまでの私の最善の試みは

ul#detailsList li input#showCheckbox:checked + li {
    display:block;
}

+ liは、親の兄弟ではなく、チェックボックスの直後の LI (つまり兄弟) のみを選択するため、明らかにこれは機能しません。

これは可能ですか？

4

2 に答える 2

13

CSSではできませんが、

jQueryを使ってみることができます

$("#showCheckbox").click(function(){
    $(this).parent().siblings().show();
});
于 2013-06-11T16:00:13.283 に答える