Question

我试图使用html和javascript制作一个简单的手风琴。这是我的HTML代码：

<button class="accordion" id="part_one">Part One</button>
<div class="panel">
</div>

<button class="accordion" id="part_two">Part Two</button>
<div class="panel">
</div>

脚本：

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}</script>

它可以正常工作。但是我想知道是否有一种简单而快速的方法可以在点击一个时隐藏手风琴的其他部分，以确保始终只显示一个块。因为截至目前，如果我点击每个按钮，我可以同时显示所有内容，但我不喜欢它。

提前感谢您的帮助！：）

Answer 1

只需更新javascript，如下所示。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-file-upload">
  <div class="form-file-upload-inner">
    <label for="FileOne"><span>Select Image</span>
    </label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileOne" size="40" class="wpcf7-form-control wpcf7-file" id="FileOne" aria-invalid="false" /></span>
    <button class="close" type="button">x</button>
  </div>
</div>
<div class="form-file-upload">
  <div class="form-file-upload-inner">
    <label for="FileTwo"><span>Select Image</span>
    </label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileTwo" size="40" class="wpcf7-form-control wpcf7-file" id="FileTwo" aria-invalid="false" /></span>
    <button class="close" type="button">x</button>
  </div>
</div>
<div class="form-file-upload">
  <div class="form-file-upload-inner">
    <label for="FileThree"><span>Select Image</span>
    </label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileThree" size="40" class="wpcf7-form-control wpcf7-file" id="FileThree" aria-invalid="false" /></span>
    <button class="close" type="button">x</button>
  </div>
</div>

＆＃13;

在javascript手风琴中隐藏其他元素

1 个答案: