隐藏除点击之外的所有元素

Question

已经有一些帖子对此和我已经通过他们，但仍然能够完成此项。此外，我不确定我所确信的是做到这一点的最佳方式。这里是html标记：

<nav id="main-nav"> 
    <ul class="main-nav-level1"> 
    <li> 
     <a href="javascript:void(0)"><img class="abc-logo" src="images/abc-Logo.png" alt="abc logo" title="abc logo" /></a> 
    </li> 
    <li class="vehicles level1"><a href="javascript:void(0)">Vehicles</a></li> 
    <li class="shop level1"><a href="javascript:void(0)">Shop</a></li> 
    <li class="finance level1"><a href="javascript:void(0)">Finance</a></li> 
    <li class="owner level1"><a href="javascript:void(0)">Owner</a></li> 
    <li class="locate-dealer-link level1"> 
     <a href="javascript:void(0)"><img class="signin-avatar" src="images/mobile_locate_icon.PNG" alt="locate a dealer" title="locate a dealer" />Locate a dealer</a> 
    </li> 
    <li class="level1"> 
     <a href="javascript:void(0)"><img class="signin-avatar" src="images/icon-search.png" alt="Search" title="Search" /></a> 
    </li> 
    </ul> 
    <div class="second-level-vehicles level1-child"> 
    <ul class="second-level-vehicles-nav"> 
     <li><a href="javascript:void(0)">Popular</a></li> 
     <li><a href="javascript:void(0)">Cars</a></li> 
     <li><a href="javascript:void(0)">SUV &amp; Crossovers</a></li> 
     <li><a href="javascript:void(0)">Trucks &amp; Vans</a></li> 
     <li><a href="javascript:void(0)">Commercial Vehicles</a></li> 
     <li><a href="javascript:void(0)">Future Vehicles</a></li> 
    </ul> 
    </div> 
    <div style="overflow-x:auto;"> 
    <table class="second-level-shop level1-child" cellpadding="15"> 
     <tr> 
     <th>Research</th> 
     <th>Shop</th> 
     <th>Buy</th> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Build &amp; Price</a></td> 
     <td><a href="javascript:void(0)">Search Dealer Inventory</a></td> 
     <td><a href="javascript:void(0)">Request a Quote</a></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Help me Choose</a></td> 
     <td><a href="javascript:void(0)">Special Offers</a></td> 
     <td><a href="javascript:void(0)">Estimate your Payment</a></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Brochures and Guides</a></td> 
     <td><a href="javascript:void(0)">Schedule a Test Drive</a></td> 
     <td><a href="javascript:void(0)">Trade-in Value</a></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Get Updates</a></td> 
     <td><a href="javascript:void(0)">Certified Pre-Owned</a></td> 
     <td></td> 
     </tr> 
    </table> 
    <table class="second-level-finance level1-child" cellpadding="15"> 
     <tr> 
     <th>abc Credit Financing</th> 
     <th>Tools &amp; Support</th> 
     <th>Applying for Credit Card</th> 
     <th>Account Management</th> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Financing</a></td> 
     <td><a href="javascript:void(0)">Payment Calculator</a></td> 
     <td><a href="javascript:void(0)">Apply Online</a></td> 
     <td><a href="javascript:void(0)">My Account</a></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Financing Options</a></td> 
     <td><a href="javascript:void(0)">Shopping Guide</a></td> 
     <td><a href="javascript:void(0)">Applying at a Dealer</a></td> 
     <td><a href="javascript:void(0)">Registration</a></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Finance Options Tool</a></td> 
     <td><a href="javascript:void(0)">Customer Support</a></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Lease End Information</a></td> 
     <td><a href="javascript:void(0)">How to Pay</a></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Vehicle Protection</a></td> 
     <td><a href="javascript:void(0)">Contact Us</a></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Commercial Financing</a></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Special Programs</a></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
    </table> 
    <table class="second-level-owner level1-child" cellpadding="15"> 
     <tr> 
     <th>Your Vehicle</th> 
     <th>Service &amp; Maintenance</th> 
     <th>Sync &amp; How-TOS</th> 
     <th>Contact Us</th> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Owner Home</a></td> 
     <td><a href="javascript:void(0)">Schedule Service</a></td> 
     <td><a href="javascript:void(0)">SYNC Technology</a></td> 
     <td><a href="javascript:void(0)">Locate a Dealer</a></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Owner Manuals</a></td> 
     <td><a href="javascript:void(0)">Service Coupons &amp; Offers</a></td> 
     <td><a href="javascript:void(0)">Vehicle How-Tos</a></td> 
     <td><a href="javascript:void(0)">Give Us A Call</a></td> 
     </tr> 
     <tr> 
     <td><a href="javascript:void(0)">Your Warranty</a></td> 
     <td><a href="javascript:void(0)">Redeem a Rebate</a></td> 
     <td><a href="javascript:void(0)">Software Downloads</a></td> 
     <td><a href="javascript:void(0)">Roadside Assistance</a></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     <td><a href="javascript:void(0)">Solution Finder</a></td> 
     <td></td> 
     </tr> 
    </table> 
    </div> 
</nav> 

所以这里是我正在寻找。当我在第4行上点击班级level1时，第10行的班级level1-child应该打开，如果有其他元素打开，他们应该关闭。同样，当我点击第5行上的level1级别时，21上的class1-child应该打开，所有元素都应该关闭。

真正的HTML标记将包含许多其他表，如下所示，所以我不能在javascript中对类名进行硬编码。我想有一个更通用的解决方案。这里是Javascript，但现在我当我点击一个元素时，我可以切换一个但不能隐藏休息。希望我有道理。

$(document).ready(function() { 
    $(".vehicles").click(function() { 
    $(".second-level-vehicles").slideToggle("slow"); 
    }); 
    $(".shop").click(function() { 
    $(".second-level-shop").slideToggle("slow"); 
    }); 
    $(".finance").click(function() { 
    $(".second-level-finance").slideToggle("slow"); 
    }); 
    $(".owner").click(function() { 
    $(".second-level-owner").slideToggle("slow"); 
    }); 
}); 

如上图所示，JS未优化。我想避免或至少最小化JS中硬编码的类名。

在此先感谢

Answer 1

试试这个。您可以传递多个类选择器，然后使用它来查找切换相应部分所需的相应类。

$().ready(function(){ 
    $(".vehicles,.shop,.finance,.owner").click(function(){ 
    var this_class = $(this).attr("class").split(' ')[0]; 
    $('[class^=second-level-]').each(function() // iterate through each element which has class starts with 'second-level-' 
    {  
     if(!$(this).attr("class").contains(this_class)) 
      $(this).hide(); 
     else 
      $(this).slideToggle("slow"); 
    }); 
}); 
}); 

工作例如：https://jsfiddle.net/DinoMyte/1jgo6mpc/1/

UPDATE :为了避免在选择每一个目标类的硬编码，可以追加具有相同名称的附加类（在下面的例子中我加入类“目标” ）给每个li标签。

<nav id="main-nav"> 
<ul class="main-nav-level1"> 
<li><a href="javascript:void(0)"><img class="abc-logo" src="images/abc-Logo.png" alt="abc logo" title="abc logo"/></a></li> 
<li class="target vehicles level1"><a href="javascript:void(0)">Vehicles</a></li> 
<li class="target shop level1"><a href="javascript:void(0)">Shop</a></li> 
<li class="target finance level1"><a href="javascript:void(0)">Finance</a></li> 
<li class="target owner level1"><a href="javascript:void(0)">Owner</a></li> 
<li class="locate-dealer-link level1"><a href="javascript:void(0)"><img class="signin-avatar" src="images/mobile_locate_icon.PNG" alt="locate a dealer" title="locate a dealer"/>Locate a dealer</a></li> 
<li class="level1"><a href="javascript:void(0)"><img class="signin-avatar" src="images/icon-search.png" alt="Search" title="Search"/></a></li></ul> 
<div class="second-level-vehicles level1-child"> 
<ul class="second-level-vehicles-nav"> 
<li><a href="javascript:void(0)">Popular</a></li> 
<li><a href="javascript:void(0)">Cars</a></li> 
<li><a href="javascript:void(0)">SUV &amp; Crossovers</a></li> 
<li><a href="javascript:void(0)">Trucks &amp; Vans</a></li> 
<li><a href="javascript:void(0)">Commercial Vehicles</a></li> 
<li><a href="javascript:void(0)">Future Vehicles</a></li> 
</ul> 
</div> 
<div style="overflow-x:auto;"> 
<table class="second-level-shop level1-child" cellpadding="15"> 
<tr> 
<th>Research</th> 
<th>Shop</th> 
<th>Buy</th> 
    </tr> 
<tr> 
<td><a href="javascript:void(0)">Build &amp; Price</a></td> 
<td><a href="javascript:void(0)">Search Dealer Inventory</a></td> 
<td><a href="javascript:void(0)">Request a Quote</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0)">Help me Choose</a></td> 
<td><a href="javascript:void(0)">Special Offers</a></td> 
<td><a href="javascript:void(0)">Estimate your Payment</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0)">Brochures and Guides</a></td> 
<td><a href="javascript:void(0)">Schedule a Test Drive</a></td> 
<td><a href="javascript:void(0)">Trade-in Value</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0)">Get Updates</a></td> 
<td><a href="javascript:void(0)">Certified Pre-Owned</a></td> 
<td></td> 
</tr> 
</table> 
</div> 
</nav> 


<script> 
    $().ready(function(){ 
    $(".target").click(function(){ 
    var this_class = $(this).attr("class").split(' ')[1]; 
    $('[class^=second-level-]').each(function() 
    {  
     if(!$(this).attr("class").contains(this_class)) 
      $(this).hide(); 
     else 
     $(this).slideToggle("slow"); 
    }); 
}); 
}); 


</script> 

实施例：https://jsfiddle.net/DinoMyte/1jgo6mpc/2/