堆棧內存溢出
  簡體   English   中英

單擊當前手風琴后如何關閉其他手風琴面板

[英]how to close other accordion panel once click current accordion

 原文  2020-01-16 17:31:36  7   2    javascript

問題描述

我正在創建引導手風琴，我想一次只打開一個面板，但現在如果點擊另一個手風琴，它不會關閉上一個面板如何解決這個問題。

我正在創建引導手風琴，我想一次只打開一個面板，但現在如果點擊另一個手風琴，它不會關閉上一個面板如何解決這個問題。

這是我的代碼

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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;
}

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

.accordion:after {
  content: '\002B';
  color: #777;
  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;
}
</style>
</head>
<body>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<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 3</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>
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";
    } 
  });
}
</script>

</body>
</html>

2 個解決方案

解決方案1
 0  2020-01-16 17:37:12

如果您正確使用它，那么您不需要在其中應用您自己的邏輯/JS。 請參考 - https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">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.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">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.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">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.</div> </div> </div> </div> </div> </body> </html>

解決方案2
 0  2020-01-16 17:57:08

沒有 Bootstrap

const accAll = document.querySelectorAll('button.accordion')

accAll.forEach(acc=>{
  acc.onclick=()=>{

    // close others
    document.querySelectorAll('button.accordion.active').forEach(act=>{
      if (act!==acc) {
        act.classList.remove('active')
        act.nextElementSibling.style.maxHeight = null
    } })

    let panel = acc.nextElementSibling
    panel.style.maxHeight = (acc.classList.toggle('active')) ? (panel.scrollHeight + "px") : null
} })

這是相同的代碼：

const accAll = document.getElementsByClassName("accordion");

for (let i = 0; i < accAll.length; i++)
{
  let acc = accAll[i] 

  acc.addEventListener("click", function()
  {
    // close others
    for(let j = 0; j < accAll.length; j++)
    {
      let act = accAll[j] 

      if (acc!==act && act.classList.contains('active'))
      {
        act.classList.remove('active')
        act.nextElementSibling.style.maxHeight = null
      }
    }
    let panel         = acc.nextElementSibling
    let classActiveOn = acc.classList.toggle('active')

    if (classActiveOn ) { panel.style.maxHeight = panel.scrollHeight +'px' }
    else                { panel.style.maxHeight = null  }
   });
}

演示片段

 const accAll = document.querySelectorAll('button.accordion') accAll.forEach(acc=>{ acc.onclick=()=>{ // close others document.querySelectorAll('button.accordion.active').forEach(act=>{ if (act!==acc) { act.classList.remove('active') act.nextElementSibling.style.maxHeight = null } }) let panel = acc.nextElementSibling panel.style.maxHeight = (acc.classList.toggle('active')) ? (panel.scrollHeight + "px") : null } })
 .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; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; 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; }
 <h2>Accordion with symbols</h2> <p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> <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 3</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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 單擊關閉jQuery手風琴活動面板 Bootstrap 手風琴 - 除非用戶單擊關閉，否則不要關閉其他手風琴 從其他控件關閉折疊面板（手風琴） 再次單擊頭部時關閉手風琴 如何設置第一手風琴面板關閉？ 當我單擊手風琴中的下一個項目時如何關閉上一個手風琴？ 單擊第二次關閉手風琴 CSS手風琴關閉點擊 如何在 angular 中單擊按鈕打開手風琴面板 單擊打開手風琴，單擊第二次關閉手風琴
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM