Question

我正在尝试在我正在开发的电子商务网站的产品菜单上创建一些显示/隐藏行为。

以下是我要做的事情：

当有人点击“住宅屋顶li”时，我想要.submenu div中没有“1”类的任何h2和li来隐藏。同样地，当有人点击“Residential Siding li”时，我想隐藏所有没有“2”类的.submenu中的h2和li ...等等...

HTML

<div class="list-group col-xs-3">
    <ul>
        <li class="list-group-item 1">Residential Roofing</li>
        <li class="list-group-item 2">Residential Siding</li>
        <li class="list-group-item 3">Commercial Roofing</li>
        <li class="list-group-item 4">Building Envelop Products</li>
        <li class="list-group-item 5">Tools/Equip/Accessories</li>
    </ul>
</div>
<!-- /End List Group -->

<div class="col-xs-6 submenu">
    <h2 class="1">Shingles</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200000" class="1">Architectural</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200001" class="1">Premium Designer</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200002" class="1">Traditional 3-Tab</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200003" class="1">Capping</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200004" class="1">Starters</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200005" class="1">Cedar Products</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200006" class="1">Alternatives</a></li>
    </ul>

    <h2 class="1">Felt &amp; Underlayment</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200007" class="1">Felt</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200008" class="1">Underlayment</a></li>
    </ul>

    <h2 class="1">Ice &amp; Water Protection</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200009" class="1">Ice &amp; Water Protection</a></li>
    </ul>

    <h2 class="1">Low Slope</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200010" class="1">Low Slope</a></li>
    </ul>

    <h2 class="1">Ventilation</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200011" class="1">Roof Vents</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200012" class="1">Ventilators</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200013" class="1">Ridge Vents</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200014" class="1">Gable Vents</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200015" class="1">Exhaust/Bathroom Vents</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200016" class="1">B-Vents</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200017" class="1">Wind Turbines</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200018" class="1">Soffit Vents</a></li>
    </ul>

    <h2 class="1">Flashing</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200019" class="1">Step Flashing</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200020" class="1">Valley Flashing</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200021" class="1">Roof Flashing</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200022" class="1">Roof Edge</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200023" class="1">Reversible Drip Edge/Drip Caps</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200024" class="1">Base &amp; Wall Flashing</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200025" class="1">Pan Flashing</a></li>
    </ul>

    <h2 class="1">Adhesives/Coating/Cement</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200026" class="1">Roof Coatings</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200027" class="1">Cements</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200028" class="1">Adhesives</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200029" class="1">Sealants</a></li>
    </ul>

    <h2 class="1">Fasteners</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200030" class="1">Staples</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200031" class="1">Hand Nails</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200032" class="1">Coil Nails</a></li>
    </ul>

    <h2 class="1">Sheathing</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200033" class="1">Drywall</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200034" class="1">Plywood</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200035" class="1">Roof Boards</a></li>
    </ul>

    <h2 class="1">Skylights/Hatches/Accessories</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200036" class="1">Hatches</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200037" class="1">Skylights</a></li>
    </ul>


    <h2 class="2">Vinyl Siding</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200038" class="2">Journeymen Select Siding</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200039" class="2">Journeymen Siding</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200040" class="2">Residential Siding</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200041" class="2">Vinyl Accessories</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200042" class="2">Haven Insulated</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200043" class="2">Architectural Siding</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200044" class="2">Woodland Siding</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200045" class="2">Board &amp; Batten</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200046" class="2">Portsmouth Shakes &amp; Shingles</a></li>
    </ul>
    <h2 class="2">Hardie Siding</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200047" class="2">Planks</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200048" class="2">Panels</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200049" class="2">Shingles</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200050" class="2">Trim</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200051" class="2">Batten</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200052" class="2">Soffit</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200053" class="2">Accessories</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200054" class="2">Caulking</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200055" class="2">Reveals</a></li>
    </ul>
    <h2 class="2">Siding Accessories</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200056" class="2">Mounts &amp; Plates</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200057" class="2">Shutters</a></li>
    </ul>
    <h2 class="2">Vents</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200058" class="2">Gable Vents</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200059" class="2">Soffit Vents</a></li>
    </ul>
    <h2 class="2">Alumipro Siding</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200060" class="2">Alumipro Siding</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200061" class="2">Accessories</a></li>
    </ul>
    <h2 class="2">Aluminum Accessories</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200062" class="2">Trim Coil</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200063" class="2">Reversible Drip Edge/Drip Caps</a></li>
    </ul>
    <h2 class="2">Soffit Systems</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200064" class="2">Vinyl</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200065" class="2">Aluminum</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200066" class="2">Accessories</a></li>
    </ul>
    <h2 class="2">Rainware Systems</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200067" class="2">Trough Coil</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200068" class="2">End Caps</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200069" class="2">Downpipe</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200070" class="2">Elbows</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200071" class="2">Straps</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200072" class="2">Outlets</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200073" class="2">Box Mitre</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200074" class="2">Strip Mitre</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200075" class="2">Brackets</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200076" class="2">Screws</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200077" class="2">Hand Nails</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200078" class="2">Ferrules</a></li>
    </ul>
    <h2 class="2">Engineered Wood Products</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200079" class="2">Trim</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200080" class="2">Corner</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200081" class="2">Soffit</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200082" class="2">Lap</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200083" class="2">Panels</a></li>
    </ul>
    <h2 class="2">Insulation</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200084" class="2">Thermal Insulation</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200085" class="2">Tape</a></li>
    </ul>
    <h2 class="2">House Wraps</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200086" class="2">House Wraps</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200087" class="2">Tape</a></li>
    </ul>
    <h2 class="2">Railings &amp; Decking</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200088" class="2">Railing</a></li>
    </ul>
    <h2 class="2">Fasteners</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200089" class="2">Screws</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200090" class="2">Hand Nails</a></li>
    </ul>
    <h2 class="2">Caulking, Touch-Up, Paints</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200091" class="2">Caulking</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200092" class="2">Paints</a></li>
    </ul>

    <h2 class="3">Two-Ply Roofing Systems</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200093" class="3">APP Heat-Welded Membranes</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200094" class="3">Asphalt</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200095" class="3">BUR (Built Up Roofing)</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200096" class="3">Cold Applied Roofing</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200097" class="3">HD Membranes</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200098" class="3">Mechanically Attached Roofing</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200099" class="3">Fiberboards</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200100" class="3">Overlay Boards</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200101" class="3">Reflective Membranes &amp; Fire Rated Cap Sheets</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200102" class="3">SBS Heat Welded Membranes</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200103" class="3">Thermal Insulation</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200104" class="3">SBS Hot Asphalt Applied Membranes</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200105" class="3">Ice &amp; Water Protection</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200106" class="3">Vapor Retarders</a></li>
    </ul>

    <h2 class="3">Single-Ply Roofing Systems</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200107" class="3">TPO</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200108" class="3">EDPM</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200109" class="3">ISO</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200110" class="3">Accessories</a></li>
    </ul>

    <h2 class="3">Fastener &amp; Accessories</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200111" class="3">Screws</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200112" class="3">Plates</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200113" class="3">Flashing</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200114" class="3">Drains</a></li>
    </ul>

    <h2 class="3">Cement, Sealants, Adhesives</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200115" class="3">Roof Coatings</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200116" class="3">Cements</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200117" class="3">Adhesives</a></li>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200118" class="3">Sealants</a></li>
    </ul>

    <h2 class="4">Self Adhesive Barrier</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200119" class="4">Self Adhesive Barrier</a></li>
    </ul>

    <h2 class="4">Back Fill Protection</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200120" class="4">Overlay Boards</a></li>
    </ul>

    <h2 class="4">Thermal Insulation</h2>
    <ul>
        <li><a href="WebCatPageServer.exe?LEVEL3&amp;LevelInfo=0000200121" class="4">Thermal Insulation</a></li>
    </ul>
</div>
<!-- /End Submenu -->

jQuery代码 这是我尝试过的：

$("#nav-products li").click(function() {
    var myClass = $(this).attr("class").split(' ')[1];
    if (!$('#nav-products .submenu h2').hasClass(myClass)) {
        $('#nav-products .submenu h2').hide();
    } else {

    }
});

我想我可能正在寻找.not()方法，但我不确定如何根据我的要求实现它。想法？

Answer 1

这将假设您的HTML结构保持不变（每个类别以h2开头，后跟ul项目。我正在使用:not CSS选择器来选择与其内部不匹配的所有内容。

$("#nav-products li").click(function() {
    var myClass = $(this).attr("class").split(' ')[1];
    $('#nav-products .submenu h2').show().next().show();
    $('#nav-products .submenu h2:not(.'+myClass+')').hide().next().hide();
});

这是工作fiddle。

Answer 2

试试这个：

<script>
    $("#nav-products li").click(function()
    {
        $("#nav-products").find("li").hide();
        $(this).show();
    });
</script>

使用与Clicked Element的类不匹配的类隐藏元素

2 个答案: