时间戳

首页 > 解决方案 > 折叠和展开所有文本的 HTML JS 问题

javascript - 折叠和展开所有文本的 HTML JS 问题

问题描述

我在使用“折叠”和“全部展开”功能时遇到问题：

  1. “全部展开”按钮不起作用。如何修复此代码？
  2. 当我单独折叠每个项目时，红色和紫色框（它们周围）不会相应扩展（如果文本超过预设高度）。Collapse 项目也溢出并一直向下到页面和页脚。如果文本的最大长度进一步向下超过其高度的末端，如何使红色和紫色框随文本展开？

//Expand All
function toggleAll() {
  var buttons = Array.prototype.slice.call(document.querySelectorAll('.testingpol_extrainfo_column'));

  buttons.forEach(function(button) {
    //Swap each element between display 'none' and 'block'
    if (window.toggleAll === 0) {
      button.style.display = 'block';
    } else {
      button.style.display = 'none';
    }

    // Swap window.toggleAll between 0 and 1
    window.toggleAll = window.toggleAll === 0 ? 1 : 0;
  });
}


// Collapse Individual points
var coll = document.getElementsByClassName("testingpol_extrainfo_column");
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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/** TESTING POLICY Information **/

.testingpol_extrainfo_outerbackground {
  background-color: rgb(51, 20, 223);
  height: 900px;
  width: auto;
  margin: 25px 0px 100px 0px;
  padding: 20px 0px 0px 0px;
}

.testingpol-extrainfo-heading {
  font-size: 42px;
  text-align: center;
  color: rgb(0, 0, 0);
  padding: 0px;
  margin: 50px 0px 0px 0px;
}

.testingpol_extrainfo_banner {
  background-color: red;
  height: 800px;
  width: 1000px;
  margin: 10px 0px 100px 250px;
  border-radius: 3px;
}

.testingpol_extrainfo_column {
  background-color: rgb(119, 119, 119);
  color: white;
  cursor: pointer;
  padding: 18px;
  margin: 0px 0px 0px 50px;
  width: 900px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.testingpol_extrainfo_column:hover {
  background-color: #555
}

.testingpol_extrainfo_content {
  margin: 0px 0px 0px 50px;
  padding: 0 18px;
  width: 900px;
  height: auto;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}


/**** FOOTER ****/

.form-control-bottomstuff {
  background-color: teal;
  height: 400px;
  width: auto;
  text-align: center;
  font-size: 50px;
  padding-top: 150px;
}

.footer_bar {
  background-color: black;
  height: 400px;
  width: auto;
  text-align: center;
  font-size: 50px;
  padding-top: 150px;
  color: white;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <title>TEST</title>
</head>

<body>
  <section class="main_body">
    <div class="testingpol_extrainfo_outerbackground">
      <div class="testingpol_extrainfo_banner">
        <div class="testingpol-extrainfo-heading ">Collapse Title</div>
        <input type="button" value="Expand All" onclick="toggleAll();">
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
            <h6>Lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
            </p><br>
            <h6>Lorem</h6><br>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
            </p><br>
            <h6>Lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
              non?</p><br>
            <h6>Lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
            <h6>Lorem</h6> <br>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
              veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
            </p><br>
            <h6>lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
              vero harum facere.</p><br>
            <h6>lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
              hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
          </p><br>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            <h6>lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
            </p>
            <h6>lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
              sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
            <h6>Lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
              recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
            <h6>lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
            </p>
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
            quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER -->

  <footer>
    <div class="footer_bar ">
      <div>
        Footer 2
      </div>
    </div>
  </footer>
</body>
<script src="script.js"></script>

</html>

标签： javascripthtmlcss

解决方案

我重写了你所有的 JS，min-height并为你的横幅和外部背景添加了 flexbox 属性，因为 flexbox 会随着内容的变化而变化。我用一个类重新设计了 JS.show并切换了那个类。希望这是您正在寻找的。

//Expand All
const expandAll = document.getElementById('expandAll');

expandAll.addEventListener('click', () => {
  // const buttons = document.querySelectorAll('.testingpol_extrainfo_column');
  const content = document.querySelectorAll(".testingpol_extrainfo_content");
  for (let i=0; i < content.length; i++) { 
    content[i].classList.remove('show-individual');
    content[i].classList.toggle('show');
    } 
  
  });

// Collapse Individual points
const banner = document.querySelector('.testingpol_extrainfo_banner');

banner.addEventListener('click', (e) =>{
  const col = document.querySelectorAll(".testingpol_extrainfo_column");
   const content = document.querySelectorAll(".testingpol_extrainfo_content"); 
  for (let i=0; i < col.length; i++){
    if (e.target === col[i]){
      content[i].classList.toggle('show-individual');
    }
  }
});


 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/** TESTING POLICY Information **/

.testingpol_extrainfo_outerbackground {
  background-color: rgb(51, 20, 223);
  min-height: 900px;
  width: auto;
  margin: 25px 0px 100px 0px;
  padding: 20px 0px 0px 0px;
}

.testingpol-extrainfo-heading {
  font-size: 42px;
  text-align: center;
  color: rgb(0, 0, 0);
  padding: 0px;
  margin: 50px 0px 0px 0px;
}

.testingpol_extrainfo_banner {
  background-color: red;
  min-height: 800px;
  display: flex;
  flex-direction: column;
/*   align-items: flex-start; */
  width: 1000px;
  margin: 10px 0px 100px 250px;
  border-radius: 3px;
}

 input[id="expandAll"]{
  align-self: flex-start;
}

.testingpol_extrainfo_column {
  background-color: rgb(119, 119, 119);
  color: white;
  cursor: pointer;
  padding: 18px;
  margin: 0px 0px 0px 50px;
  width: 900px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.testingpol_extrainfo_column:hover {
  background-color: #555
}

.testingpol_extrainfo_content {
  margin: 0px 0px 0px 50px;
  padding: 0 18px;
  width: 900px;
  height: auto;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.show {
  display: block;
}
.show-individual {
  display: block; }
/**** FOOTER ****/

.form-control-bottomstuff {
  background-color: teal;
  height: 400px;
  width: auto;
  text-align: center;
  font-size: 50px;
  padding-top: 150px;
}

.footer_bar {
  background-color: black;
  height: 400px;
  width: auto;
  text-align: center;
  font-size: 50px;
  padding-top: 150px;
  color: white;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <title>TEST</title>
</head>

<body>
  <section class="main_body">
    <div class="testingpol_extrainfo_outerbackground">
      <div class="testingpol_extrainfo_banner">
        <div class="testingpol-extrainfo-heading ">Collapse Title</div>
        <input id="expandAll" type="button" value="Expand All" >
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
            <h6>Lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
            </p><br>
            <h6>Lorem</h6><br>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
            </p><br>
            <h6>Lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
              non?</p><br>
            <h6>Lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
            <h6>Lorem</h6> <br>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
              veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
            </p><br>
            <h6>lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
              vero harum facere.</p><br>
            <h6>lorem</h6><br>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
              hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
          </p><br>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            <h6>lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
            </p>
            <h6>lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
              sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
            <h6>Lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
              recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
            <h6>lorem</h6>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
            </p>
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
            quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
          </p>
        </div>
        <button type="button" class="testingpol_extrainfo_column">Lorem</button>
        <div class="testingpol_extrainfo_content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER -->

  <footer>
    <div class="footer_bar ">
      <div>
        Footer 2
      </div>
    </div>
  </footer>
</body>
<script src="script.js"></script>

推荐阅读