Скрыть все элементы, кроме одного щелкнутого

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> 

Так вот что я ищу. Когда я нажимаю на уровне класса1 в строке 4, класс level1-child в строке 10 должен переключаться в открытый режим, и если есть какие-либо другие открытые элементы, они должны быть закрыты. Точно так же, когда я нажимаю на уровне класса1 в строке 5, уровень 1-го уровня класса на 21 должен переключиться на открытый, и все элементы должны быть закрыты.

Настоящая 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/