问题：

来自W3C的手风琴-如何一次打开一个面板？

漆雕欣德

2023-03-14

我有一个手风琴，一次只打开一个面板。我需要一些帮助，以能够关闭任何打开的面板时，用户点击打开一个关闭的面板。我想需要一些javascript来实现这一点——但我不确定如何实现……我将拥有比示例中所示更多的面板

我有以下代码：

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

.accordion {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #C11561;
}

.accordion:after {
    content: '\002B';
    color: #FFF;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#accord {
    margin-bottom: 5.5em;
}

<button class="accordion">Section 1</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>
    
    <button class="accordion">Section 2</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>
    <button class="accordion">Section 2</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>

共有3个答案

从智志

2023-03-14

改进了@MayK的答案，因此可以关闭当前项。

    var acc = document.getElementsByClassName("accordion");
    var i, j;
    
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        for (j = 0; j < acc.length; j++) {
        if(acc[j] != this) {
           acc[j].classList.remove("active");
           acc[j].nextElementSibling.style.maxHeight = null;
         }
        }
        if (!this.classList.contains("active")){
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight){
            panel.style.maxHeight = null;
          } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
          } 
        }
    
      });
    }

李光华

2023-03-14

我总是发现自己制作手风琴更容易：

$('.item-title').click(function() {
        $(this).parents().siblings().find('.item-body').slideUp();
        $(this).parents().siblings('.item').find('.item-open-close').removeClass('fa-minus').addClass('fa-plus');
        $(this).find('i').toggleClass('fa-minus fa-plus');
        $(this).siblings('.item-body').slideToggle();
    });

.item-title i {
float:right;
}

.item-title {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.item-body {
padding:18px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="accordion">            
  <div class="item">
    <div class="item-title">
      Section 1<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
  <div class="item">
    <div class="item-title">
      Section 2<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
  <div class="item">
    <div class="item-title">
      Section 3<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
</div>
</div>

邵研

2023-03-14

在打开单击的手风琴之前，您需要关闭其他手风琴。

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    for (j = 0; j < acc.length; j++) {
      acc[j].classList.remove("active");
      acc[j].nextElementSibling.style.maxHeight = null;
    }
    if (!this.classList.contains("active")){
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }

  });
}

.accordion {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #C11561;
}

.accordion:after {
    content: '\002B';
    color: #FFF;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#accord {
    margin-bottom: 5.5em;
}

<button class="accordion">Section 1</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>
    
    <button class="accordion">Section 2</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>
    <button class="accordion">Section 2</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>

类似资料：

一次只能打开一个手风琴面板

有这个简单的手风琴，希望一次只打开一个手风琴面板。我的代码一直工作，直到我两次点击同一个面板试图关闭它。它不会关闭，并且总是有一个面板打开。有谁能指出我的逻辑哪里出了问题，以及如何解决？我包含了一段代码片段：
一次只能打开一个的手风琴

我有一个非常好的手风琴，它在网站上看起来很好，并且可以正常工作。但是，我正在尝试为其添加更多JavaScript功能，以使其看起来更专业。目前，手风琴允许您一次打开多个面板，即如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。关闭这些面板的唯一方法是重新单击标题。我想要的是一些防止同时打开多个选项卡的JavaScript代码，所以如果我单击一个新面板，它应该首先关闭现有的打开面
一次只能打开一个手风琴标签

我有一个手风琴，它的作品真的很好，它看起来很好的网站和工程，因为它应该。然而，我正在尝试向它添加更多的JavaScript功能，使它看起来更专业。目前，手风琴允许您一次打开多个面板，即如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。关闭这些面板的唯一方法是重新单击标题。我想要的是一些防止同时打开多个选项卡的JavaScript代码，所以如果我单击一个新面板，它应该首先关闭现有
Twitter引导多个手风琴，但一次只能打开一个面板

问题内容：我的页面上有3个Twitter Bootstrap手风琴，每一个都这样设置：该“的手风琴s为像上面显示的一个，所以，和。每个手风琴的面板数相同。如何更改此设置，以便一次只能打开一个面板？目前，每个手风琴可以打开一个面板，这不是我想要的行为。演示： JSFiddle 问题答案：尝试这个：
当我们打开一个手风琴时，另一个应该合上

当另一个手风琴打开时，我必须关闭手风琴。我一次只能显示一个手风琴打开。目前，手风琴允许您一次打开多个面板。如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。我只能显示一个。你能帮我吗？
如何在一个页面上展开/折叠多个单独的jquery手风琴

我有一个剃刀页面，在那里我想要一个单独的，可折叠的标题，每个行项目在一个模型。我想在页面上创建一个按钮，在那里它找到页面上每一个带有某个类的手风琴，并展开它们。我有它非常接近工作，但在展开一些在页面加载时关闭的东西后，你必须点击该手风琴的头部两次，以使它再次折叠这大概是我的剃刀代码这是创建手风琴的jquery 在添加展开/折叠按钮代码之前，使用所有这些代码，手风琴都可以很好地工作 “展开/折

来自W3C的手风琴-如何一次打开一个面板？

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档