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行的class1级时，第10行的class level1-child应该打开，如果有任何其他元素打开，则应该关闭它们。类似地，当我单击第5行的class level1时，21上的class level1-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 :为了避免选择器中每个目标类的硬编码，您可以附加一个具有相同名称的附加类（在下面的示例中我添加了类＆＃39; target＆＃39;） li tag。

<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/

隐藏所有元素，但隐藏一个被单击的元素

1 个答案: