时间戳

首页 > 解决方案 > 对类显示无

javascript - 对类显示无

问题描述

 <div id="left-option-navigation">
      <div id="left-option-expand">
       <i onclick="openColl()" class="fas fa-angle-double-left"></i>
      </div>

     <div class="left-navigation-option" href=""><i class="fas fa-tachometer-alt"></i><span class="left-navigation-option-text">Dashboard</span></div>
     <div class="left-navigation-option" href=""><i class="far fa-file-alt"></i><span class="left-navigation-option-text">Documents</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-tags"></i><span class="left-navigation-option-text">Products</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-archive"></i><span class="left-navigation-option-text">Stock</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-print"></i><span class="left-navigation-option-text">Reporting</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-user-friends"></i><span class="left-navigation-option-text">Customers & Suppliers</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-heart"></i><span class="left-navigation-option-text">Promotions & Actions</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-key"></i><span class="left-navigation-option-text">Users & Security</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-wallet"></i><span class="left-navigation-option-text">Payement Types</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-globe"></i><span class="left-navigation-option-text">Countries</span></div>
     <div class="left-navigation-option" href=""><i class="fas fa-percent"></i><span class="left-navigation-option-text">Tax Rates</span></div>
     <div class="left-navigation-option" href=""><i class="far fa-building"></i><span class="left-navigation-option-text">My Company</span></div>
  </div>

<script>
  function openColl() 
  {
    document.getElementById("left-option-navigation").style.width = "100px";
    
  }
</script>

嘿，这是我的代码，所以我想知道当我在 onclick 上调用 openColl() 函数时如何隐藏 left-navigation-option-text span 类。通过将特定类的样式设置为显示 none 是解决方案，但怎么能我在点击时触发此功能并应用于整个班级。

标签： javascriptcss

解决方案

因此，如果我对您的理解正确，您想同时将该课程应用于所有left-navigation-option-text课程，对吗？

你可以这样做：

    function openColl() {
    
      let optionText = document.querySelectorAll('.left-navigation-option-text');
    
    optionText.forEach( el => el.classList.toggle('hidden') );
}

首先，您获取具有类名的所有元素left-navigation-option-text并将其存储在名为 optionText 的变量中。然后你遍历所有元素并将类切换.hidden为全部关闭它们。

在您的 css 文件中，您创建一个类.hidden并将其设置为display:none.

推荐阅读