Question

我正在使用这个W3Schools教程来创建一些可折叠的东西。我想创建两个可以折叠或展开所有可折叠按钮的按钮。我已经包含了我正在使用的代码片段。我似乎无法创建两个工作按钮，所以我刚刚发布了我正在使用的代码。

＆＃13;

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

＆＃13;

<style>
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}
</style>

＆＃13;

<button class="collapsible">Open Section 2</button>
<div class="content">
  <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="collapsible">Open Section 3</button>
<div class="content">
  <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>

＆＃13;

Answer 1

这是你想要实现的目标，对吧？这只是使用jQuery的一个例子。您可以按照自己的方式对其进行修改。

$('.item').on('click', '.header', function(){
  $('.item').removeClass('show')
  $(this).parent().toggleClass('show')
})

.item {
  border: 1px solid #ddd;
  margin: 5px;
}
.header {
  padding: 10px;
  cursor: pointer;
}
.content {
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  border-top: 1px solid #ddd;
}
.item.show .content {
  height: auto;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class='item'>
  <div class='header'>Item 1</div>
  <div class='content'>Content 1</div>
</section>

<section class='item'>
  <div class='header'>Item 1</div>
  <div class='content'>Content 2</div>
</section>

Answer 2

这是您的代码扩展。

我想这就是你要的

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) 
{
  coll[i].addEventListener("click", function() 
  {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight)
    {
      content.style.maxHeight = null;
    } 
    else 
    {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

var expA = document.getElementById('expAll');
    expA.addEventListener('click', function() {
      expandFunction(true);
    }, false);

    var collA = document.getElementById('collAll');
    collA.addEventListener('click', function() {
      expandFunction(false);
    }, false);

    function expandFunction(x) {
      var details = document.getElementsByClassName("collapsible");
      Array.from(details).forEach(span => {
        var content = span.nextElementSibling;
        var condition;
        var result;
        switch (x) {
          case false:
            condition = content.style.maxHeight == content.scrollHeight + "px";
            result = null;
            break;
          case true:
            condition = content.style.maxHeight == null || content.style.maxHeight == "";
            result = content.scrollHeight + "px";
            break;
          default:
        }
        if (condition) {
          span.classList.toggle("active");
          content.style.maxHeight = result;
        }
      });
    }

<style>
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}
</style>

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>

<a href='#8' id='expAll'>Expand All</a>
<a href='#9' id='collAll'>Collapse All<br></a>

</head>

<body>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <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="collapsible">Open Section 3</button>
<div class="content">
  <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>
</body>
</html>

展开全部/折叠所有按钮js

2 个答案: