Question

我正在尝试使用css和一小部分javascript创建一个手风琴面板。

除了切换面板外，一切似乎都能正常工作。

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

这是一个小提琴：

我尝试这样做，但这样可以让所有面板一直关闭：

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>

Answer 2

使用.not选择器...你不需要使用jquery

JS：

var acc = $(".accordion"); //jquery accordion

acc.click(function() //when we click on element
{ 
    $(this).toggleClass("active");  //it is active
    $('.panel').not($(this).next()).hide(); //we hide all panels but not the next element
    $(this).next().toggle(); //and we show the next element
});

CSS：切换手风琴小组？

2 个答案: