Question

我有这个相当＆＃39;定制＆＃39;手风琴，允许我在打开的项目（颜色）上添加一个类。

但我仍然缺少上述功能：我想自动关闭所有已打开的标签，但我点击的标签除外，所以它们不会堆积起来。

这是我当前的代码

HTML

<button class="accordion">Engagement Editor</button>
<div 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><!-- /.end of job post -->

<button class="accordion">Partnership & Business Development Lead</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><!-- /.end of job post -->

<button class="accordion">Assistant Video Editor</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><!-- /.end of job post -->

JS

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

LIVE DEMO

Answer 1

<强> Working fiddle

当您点击然后激活点击的按钮时，您从所有active按钮中删除.accordion课程：

$('.accordion').removeClass('active');

同时从所有面板中删除show类，然后将其添加到已确认的面板中：

$('.panel').removeClass('show');

注意：最好将该功能置于循环之外（例如click_action()），然后在内部调用它。

您还可以查看完整的jQuery解决方案 Fiddle HERE 。

希望这有帮助。

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

function click_action(){
  $('.accordion').removeClass('active');
  $('.panel').removeClass('show');

  this.classList.toggle("active");
  this.nextElementSibling.classList.toggle("show");
}

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = click_action;
}

＆＃13;

button.accordion {
  background-color: #fff;
  cursor: pointer;
  padding: 0px 0 8px 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  border-bottom: 1px solid #ccc;
}

button.accordion.active, button.accordion:hover {
  color: #f06100
}

button.accordion:before {
  content: '\02795';
  font-size: 9px;
  float: left;
  margin-left: 0px;
  margin-right: 10px;
  margin-top: 7px;
}

button.accordion.active:before {
  content: "\2796";
}

div.panel {
  background-color: white;
  max-height: 0;
  padding-left: 15px;
  overflow: hidden;
  padding-top: 0px;
  border-bottom: 4px solid #ccc;
  transition: 0.6s ease-in-out;
  opacity: 0;
  margin-bottom: 8px;
}

.panel-icon {
  margin-right: 10px;
}

.panel h5 {
  font-size: 15px;
  line-height: 23px;
  margin-top: 5px;
  margin-bottom: 0px;
  display: inline-block;
  color: #2d2d2d
}

.panel p {
  font-size: 15px;
  line-height: 23px;
  padding: 15px 30px 20px 0;
  color: #2d2d2d
}

div.panel.show {
  opacity: 1;
  max-height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Engagement Editor</button>
<div 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><!-- /.end of job post -->

<button class="accordion">Partnership & Business Development Lead</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><!-- /.end of job post -->

<button class="accordion">Assistant Video Editor</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><!-- /.end of job post -->

＆＃13;

Answer 2

首先，http://php.net/manual/en/function.sprintf.php。

其次，你为什么要使用jQuery＆amp; jQuery UI如果你打算使用像getElementsByClassName和var acc = document.getElementsByClassName("accordion"); var panels = document.getElementsByClassName("panel"); var i; var j; var handleAccordionClick = function(){ for(j = 0; j < panels.length; j++){ acc[j].classList.remove("active"); panels[j].classList.remove("show"); } this.classList.add("active"); this.nextElementSibling.classList.add("show"); } for (i = 0; i < acc.length; i++) { acc[i].onclick = handleAccordionClick; }这样的vanilla DOM API？

第三，如果你想修复你在JSFiddle中创建的vanilla JavaScript解决方案，可以使用以下代码：

.siblings()

请记住，这效率不高。它将所有手风琴设置为非活动状态，然后将单击的手风琴设置为活动状态。要获得更好的解决方案，请将更多时间投入到更高效的vanilla解决方案中，或者，如果您打算使用jQuery，请查看{{1}}

单击另一个时如何关闭手风琴选项卡？

2 个答案: