javascript - 隐藏/显示多个 div

Question

我想通过单击一个文本行来隐藏/显示一些 div 框。总而言之，它必须执行类似于 Android 文件资源管理器的操作。

当我点击 Mes Vidéos 文本字段时，这两张图片显示了不同之处。

这是我当前代码的一部分:

    function folderChange(param) {
      var video=document.getElementById('v');
      var file=document.getElementById('f');
      if(param==1) {
        video.style.display = "block";
        file.style.display = "none";
      }
      else {
        file.style.display = "block";
        video.style.display = "none";
      }  
    }

    .filefolder {
      display: none;
    }
    .videofolder {
      display: block;
    }

    <div class="groove2"></div>
      <div class="chemin filefolder" id="f" style="background-color:#FAF9F8" style="color:#BDBCBA"><font color="#575654">Flashdisk <b>> Mes Fichiers</b></font></div>
      <div class="chemin videofolder" id="v" style="background-color:#FAF9F8" style="color:#BDBCBA"><font color="#575654">Flashdisk ><b onclick="folderChange(0)"> Mes Fichiers</b> ><b> Mes Vidéos</b></font></div>
      <div class="groove2"></div>
      <div id="madiv">
        <div class="videofolder" id="v">
          <div>
             <input type="checkbox" id="contactChoice1" name="fichier" value="Video1">
             <img class="icone" src="video.jpg">
             <label for="Video1">Video1.mp4</label>
          </div>
          <div class="groove"></div>
        </div>
        <div id="f" class="filefolder">
          <div class="folder">
             <img class="icone" src="dossier.jpg" onclick="folderChange(1)">
             <p onclick="folderChange(1)"><b>Mes Vidéos</b></p>
          </div>
          <div class="groove"></div>
        </div>
        <div class="filefolder">
          <div id="f" class="blok">
             <input class="off" type="checkbox" disabled="true" id="contactChoice1" name="fichieroff" value="Video1">
             <img class="icone" src="xls.jpg">
             <label for="Video1"><b>Resultats.xlsx</b></label>
          </div>
          <div class="groove"></div>
        </div>

我应该做的是在单击 Mes Vidéos 时更改 videofolder 和 filefolder 的 display 值，但在屏幕上，没有任何变化(或者只是路径显示)。

我是 HTML 和 Javascript 的新手。

注意:目前没有文件阅读器，我只是在处理显示器。

Answer 1

如果您只有两种类型的东西要显示/隐藏，您可以用一行遍历它们，并对它们应用 classList.toggle():

function folderChange() {
  document.querySelectorAll(".video, .file").forEach(el => el.classList.toggle("show"))
}

.video,
.file {
  display: none
}

.show {
  display: block
}

<button onclick="folderChange()">Show Files</button>
<button onclick="folderChange()">Show Videos</button>

<p class="video">video a</p>
<p class="file show">file a</p>
<p class="video">video b</p>
<p class="video">video c</p>
<p class="file show">file b</p>
<p class="file show">file c</p>
<p class="file show">file d</p>
<p class="video">video d</p>
<p class="video">video e</p>
<p class="file show">file e</p>