javascript - CSS:切换 Accordion 面板？

Question

我正在尝试使用 css 和少量 javascript 创建 Accordion 面板。

除了切换面板之外，一切似乎都运行良好。

所以基本上，当一个面板被点击时，我需要关闭所有其他打开的面板。

这是一个 fiddle :

FIDDLE

我尝试这样做，但所有面板始终处于关闭状态:

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        $('.panel').addClass('hide');
        this.nextElementSibling.classList.toggle("hide");
        this.nextElementSibling.classList.toggle("show");
  }
}

和 CSS 部分:

.panel.hide {
    opacity: 0;
    height: 0;  
}

我也试过:

$(this).removeClass('hide');

我知道这是 jquery 而不是纯 Javascript 但我认为我可以工作但没有。

有人可以就这个问题提出建议吗？

提前致谢。

Answer 1

在点击处理程序中获取事件元素，它不是当前元素然后从中删除事件状态。

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

button.accordion {
  background-color: #CBF1F5;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #3CF;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
}
button.accordion.active,
button.accordion:hover {
  background-color: #E1F7FB;
}
button.accordion:after {
  content: '\25bc';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: "\25b2";
  color: #FFF;
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.panel.show {
  opacity: 1;
  max-height: 500px;
}
.panel.hide {
  opacity: 0;
  height: 0;
}

<button class="accordion">Section 1</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<button class="accordion">Section 2</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

---

使用 jQuery

$('.accordion').click(function() {
  var $this = $(this).toggleClass('active');
  var $panel = $this.next().toggleClass('show');
  $('.accordion.active').not(this).removeClass('active').next().removeClass('show');
});

button.accordion {
  background-color: #CBF1F5;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #3CF;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
}
button.accordion.active,
button.accordion:hover {
  background-color: #E1F7FB;
}
button.accordion:after {
  content: '\25bc';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: "\25b2";
  color: #FFF;
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.panel.show {
  opacity: 1;
  max-height: 500px;
}
.panel.hide {
  opacity: 0;
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Section 1</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<button class="accordion">Section 2</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>