如何将小节添加到手风琴中，并且一次只能折叠一个小节

我正在尝试创建一个手风琴以用于我的网站，我正在尝试实现两件事：

1(我只想在任何时候扩展一个部分，例如，如果"简介"被展开，当我选择"客户"或"商业"部分时，它会折叠。

需要向 JavaScript 中添加什么才能实现这一点？

(在"客户"部分中，我正在尝试添加其他可折叠部分，称为"单元1"，"单元2"，"单元3"等。

如何创建小节？

任何对上述方面的帮助将不胜感激。

谢谢弗兰克

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

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}
div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Frank's Accordion</h2>
<p>Select a section..</p>
<button class="accordion">Introduction</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">Customers</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">Commercial</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>
<script>
</script>
</body>
</html>

我只回答了你的第一个问题，因为我认为你需要在我们提供帮助之前尝试第二个问题。我们不想为您更正代码:)

我基本上在onClick事件中添加了另一个for循环，以检查是否有任何手风琴具有"活动"类，如果有，则折叠它们。我想这段代码可以简化。

var acc = document.getElementsByClassName("accordion");
var i;
// check if element has class function
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
// accordion function
function accordion(element) {
  element.classList.toggle("active");
  var panel = element.nextElementSibling;
  if (panel.style.maxHeight){
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
}
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var acc = document.getElementsByClassName("accordion");
    // loop through accordion elements again
    for (i = 0; i < acc.length; i++) {
      // check if any of the element have a class of "active" and is not the currently clicked element
      if ( hasClass(acc[i], "active") &&  acc[i] != this) {
        // collapse any already opened accordions
        accordion(acc[i]);
      }
    }
    // toggle clicked accordion
    accordion(this);
  }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}
div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Frank's Accordion v1.1</h2>
<p>Select a section..</p>
<button class="accordion">Introduction</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">Customers</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">Commercial</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>
<script>
</script>
</body>
</html>

相关内容

最新更新

热门标签：