javascript - 使用 Jquery 隐藏其他 ul 和 li 后显示某些 li

Question

关于这个site我在使用用于隐藏/显示选项的 JQuery 时遇到问题。如果单击单选按钮，您可以隐藏不同的选项，但这样做也会隐藏选项中的一些要点。我认为这是因为我的代码说要隐藏 div“row-fluid”中的所有 li，但我不知道如何让它停止影响我想要隐藏的第一个级别以下的 li。

我使用的代码是:

<div align="left" id="rdoBoxes">

    <h2>Help me choose</h2>
    <input class="rdo0" type="radio" name="selector1" value ="all" checked>Show me everything<br>
    <input class="rdo1" type="radio" name="selector1" value="full">I want a hands-off ownership experience that will keep my {modal /images/productImages/professional_binder.jpg|title=Highly organized, mylar reinforced, tabbed binder. A sophisticated touch for the sophisticated pilot.}Executive Binder{/modal} up to date via insert shipments, professionally transcribe (including parts and inspections) unlimited records per year, and provide 48 hour turn around support<br>
    <input class="rdo2" type="radio" name="selector1" value="mid">I want to stay completely digital and have to 10 records professionally transcribed (including parts and inspections) per year<br>
    <input class="rdo3" type="radio" name="selector1" value="diy" >I'm interested in doing everything on my own using the {modal /images/Web-Portal-Screenshot-890PM-cropped-optimized.jpg|title=PlaneLogiX Web Portal}easy to use interface{/modal}

</div>

{source 0}

<script type="text/javascript">
//show all

$(".rdo0").click(function(){

    $("div.row-fluid ul:nth-child(1) li:nth-child(1)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(2)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(3)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3)").removeClass('hidden');
        $("div.row-fluid ul:nth-child(3) li:nth-child(1)").removeClass('hidden');
    $("div.row-fluid").children("ul").removeClass('hidden');
})

//Show Premium
$(".rdo1").click(function(){
    $("div.row-fluid ul:nth-child(1) li:nth-child(3)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3)").removeClass('hidden');
        $("div.row-fluid").children("ul").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(1)").addClass('hidden');
//  $("div.rsm_fixed_height ul:nth-child(1) li:nth-child(3)").removeclass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(2)").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1)").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2)").addClass('hidden');


})

//Show Mid Tier
$(".rdo2").click(function(){

    $("div.row-fluid ul:nth-child(1) li:nth-child(2)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2)").removeClass('hidden');
    $("div.row-fluid").children("ul").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(1)").addClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(3)").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1)").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3)").addClass('hidden');



})

//Show DIY
$(".rdo3").click(function(){
    $("div.row-fluid ul:nth-child(1) li:nth-child(1)").removeClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(1)").removeClass('hidden');
    $("div.row-fluid").children("ul").removeClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(2)").addClass('hidden');
    $("div.row-fluid ul:nth-child(1) li:nth-child(3)").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(2)").addClass('hidden');
    $("div.row-fluid ul:nth-child(2) li:nth-child(3)").addClass('hidden');
})


</script>

{/source}

谢谢!

Answer 1

看这个fiddle ，基于您的标记，因此必须适合您。只需使用第 n 个子伪类来隐藏或显示具有所需索引的子 li 元素

$('.thumbnails .rsm_container:nth-child(2)').hide();