隱藏元素與類不匹配點單元的類

我試圖在我正在開發的電子商務網站的產品菜單上創建一些顯示/隱藏行爲。隱藏元素與類不匹配點單元的類

這裏就是我想要做的事：

當有人點擊了「住宅屋頂裏，」我想任何H2的和李時珍在.submenu的div沒有一類「1」隱藏。同樣，當有人點擊了「住宅屋面裏，」我想隱藏的所有H2的和李在.submenu的沒有一類「2」等等......

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()方法，但我不知道到底浩根據我的要求執行它。思考？

來源

2015-06-15 dentalhero

這會假設你的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。

來源

2015-06-15 16:56:53

這很接近，阿爾瓦羅，謝謝。這在第一次點擊時完美運作。它以我想要的方式篩選出不匹配的類。但是，當我點擊第二個「nav-product li」時，它不會在子菜單中顯示相應的匹配h2和li元素。我希望最終用戶可以點擊任何「nav-products li」元素，並在子菜單中查看h2的li和相匹配的類。 – dentalhero

現在呢！ ;） –

美麗。謝謝你，先生。這有效，對我來說這也是一個有用的學習工具。 – dentalhero

試試這個：

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

來源

2015-06-15 16:47:36 Rayon

這似乎是解決不同的問題。我更新我的問題，以包含更多關於我想要做的事情的背景。無論如何感謝您的意見。 – dentalhero

隱藏元素與類不匹配點單元的類

回答

相關問題