使用JS隐藏类似于tab table的手风琴内容

编程问答 2022-06-01

问题描述

我让这段代码按照我想要的方式运行，只是我不希望有人一次能够打开多个“标签”。如果通过单击其按钮将其添加到另一个 div，我不确定如何让 Javascript 从当前拥有它的 div 中删除“transform-active”类。

function Slidein(num) {
   var element = document.getElementById(num);
   element.classList.toggle("transform-active");
}
.tabcontent {
  background-color: #218D9B;
 overflow: hidden;
  height: 0px;
  width: 600px;
}

.transform{
  -webkit-transition: .7s;  
  -moz-transition: .7s;  
  -o-transition: .7s;  
  -ms-transition: .7s;  
  transition: .7s;
}

.transform-active {
  background-color: #45CEE0;
  height: 200px;
  width: 600px;
  visibility: visible;
}
  
<button id="button1" onclick="Slidein('div1')">Button 1</button>
<button id="button2" onclick="Slidein('div2')">Button 2</button>
<button id="button3" onclick="Slidein('div3')">Button 3</button>

<div id="div1" class="tabcontent transform">
  Here's some text in my FirsT div
</div>

<div id="div2" class="tabcontent transform">
  This would be the SECOND div text
</div>

<div id="div3" class="tabcontent transform">
  And Now we have a THIRD div with its text
</div>

解决方法

也许把 Slidein 改成这样：

function Slidein(num) {    
      var elementWithTransformActiveClass = document.querySelector('.transform-active');
      var element = document.getElementById(num);
      if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
      if (element !== elementWithTransformActiveClass) element.classList.add("transform-active");
}

编辑：

您可以访问活动按钮：

var buttonId = num.replace('div','button'); 
var button = document.getElementById(buttonId); 

// and now you can add a new class to the button 

button.classList.add('new-class');


function Slidein(num) {    
      var elementWithTransformActiveClass = document.querySelector('.transform-active');
      var element = document.getElementById(num);
      if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
      if (element !== elementWithTransformActiveClass) {
           element.classList.add("transform-active");

           var buttonId = num.replace('div','button'); 
           var button = document.getElementById(buttonId); 

           // and now you can add a new class to the button 

           button.classList.add('new-class');
      }
}

要查看可用于所有 HTML 元素的所有属性和方法，请访问：w3schools.com/jsref/dom_obj_all.asp

accordionhtmljavascripttabstabs