CSS：切换手风琴小组？ [英] CSS: toggle accordion panel?

问题描述

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

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

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

这是一个小提琴：

FIDDLE

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

  var acc = document.getElementsByClassName（accordion）; 
 var i; 
 
 for（i = 0; i< acc.length; i ++）{
 acc [i] .onclick = function（）{
 this.classList.toggle（活性）; 
 $（'。panel'）。addClass（'hide'）; 
 this.nextElementSibling.classList.toggle（hide）; 
 this.nextElementSibling.classList.toggle（show）; 
} 
} 
  

和CSS部分：

  .panel.hide {
 opacity：0; 
身高：0; 
} 
  

我也试过：

  $（本）.removeClass（ '隐藏'）; 
  

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

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

提前致谢。

解决方案

在点击处理程序中获取活动项目，它不是当前项目，然后从中删除活动状态。

  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（ 节目）; } this.classList.toggle（active）; this.nextElementSibling.classList.toggle（ 节目）; }  

  button.accordion {background-color：＃CBF1F5 ;颜色：＃444;游标：指针;填充：18px;宽度：100％; border：solid 1px＃3CF; text-align：left;大纲：无; font-size：18px;过渡期：0.4s; font-weight：600;} button.accordion.active，button.accordion：hover {background-color：#E1F7FB;} button.accordion：after {content：'\ icebc'; font-size：13px;颜色：＃777;漂浮：对; margin-left：5px;} button.accordion.active：在{content：\ 25b2;之后颜色：#FFF;}。panel {padding：0 18px;背景颜色：白色; max-height：0;溢出：隐藏;过渡：0.6s轻松进出;不透明度：0;}。panel.show {opacity：1; max-height：500px;}。panel.hide {opacity：0;高度：0;}  

 < button class =accordion >第1节< / button>< div id =fooclass =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>第2节< / button>< div id = fooclass =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>第3节< / button>< div id = fooclass =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 '）不（本）.removeClass（' 激活 '）下（）removeClass（' 节目'）;。。。}）;  

<预class =snippet-code-css lang-css prettyprint-override> button.accordion {background-color：＃CBF1F5;颜色：＃444;游标：指针;填充：18px;宽度：100％; border：solid 1px＃3CF; text-align：left;大纲：无; font-size：18px;过渡期：0.4s; font-weight：600;} button.accordion.active，button.accordion：hover {background-color：#E1F7FB;} button.accordion：after {content：'\ icebc'; font-size：13px;颜色：＃777;漂浮：对; margin-left：5px;} button.accordion.active：在{content：\ 25b2;之后颜色：#FFF;}。panel {padding：0 18px;背景颜色：白色; max-height：0;溢出：隐藏;过渡：0.6s轻松进出;不透明度：0;}。panel.show {opacity：1; max-height：500px;}。panel.hide {opacity：0;高度：0;}

 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< button class =accordion>第1节< / button>< div id =fooclass =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>第2节< / button>< div id = fooclass =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>第3节< / button>< div id = fooclass =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>  

I'm trying to create an accordion panel using css and small bit of javascript.

Everything seems to work fine apart from the toggling the panels.

So basically, when one panel is clicked, I need all other open panels to be closed.

Here is a fiddle:

FIDDLE

I tried to do it this way but that keeps all the panels closed all the time:

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");
  }
}

and the CSS part:

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

I also tried :

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

I know this is jquery and not pure Javascript but I thought I could work but didn't.

could someone please advise on this issue?

Thanks in advance.

解决方案

In the click handler get the active item, it is not the current item then remove the active state from it.

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>

---

With 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>

这篇关于CSS：切换手风琴小组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！