Javascript 隐藏除单击的元素外的所有元素_Javascript_Jquery_Html

Javascript 隐藏除单击的元素外的所有元素

javascript jquery html

Javascript 隐藏除单击的元素外的所有元素,javascript,jquery,html,Javascript,Jquery,Html,有一些帖子是关于这个的，我已经看过了，但仍然能够做到这一点。我也不确定我确定的是做这件事的最佳方式。以下是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" titl

有一些帖子是关于这个的，我已经看过了，但仍然能够做到这一点。我也不确定我确定的是做这件事的最佳方式。以下是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>

如图所示，上面的JS没有优化。我希望避免或至少最小化JS中硬编码的类名

提前感谢

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

 $().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");
    });
});
});

工作示例：

UPDATE:

为了避免对选择器中的每个目标类进行硬编码，您可以向每个li标记追加一个具有相同名称的附加类（在下面的示例中，我添加了类“target”）

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


















研究
商店
购买
$（）.ready（函数（））{
$（“.target”）。单击（函数（）{
var this_class=$（this.attr（“class”）.split（“”）[1]；
$（'[class^=second level-]'）。每个（函数（）
{     
如果（！$（this.attr（“类”）包含（this_类））
$（this.hide（）；
其他的
$（此）.slideToggle（“慢”）；
});
});
});

示例：

谢谢您的回复。但我仍然无法隐藏其他元素。另外，是否可以避免使用类名、车辆、商店和其他名称，因为现在我正在准备UI，但实际上li的填充数量可能是动态的。我是否可以为所有li（如level1）指定一个公共类名？为此更新了解决方案和示例。检查它，看看它是否刚刚尝试过，但它在fiddle或我的解决方案中抛出了此错误“UncaughtTypeError:$（…）.attr（…）.contains不是函数”。你还需要我提供什么吗？

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