Question

我目前使用的代码与w3schools link的示例非常相似，但我似乎无法弄清楚要添加到javascript中的内容，以便在点击时关闭其他标签在其中一个标签上。

关于点击其他手风琴（例如here），我已经完成了一些SO答案 - 但它们主要涉及从兄弟姐妹中删除课程（＆＃34; .active＆＃34;），可能？）或在这种情况下可能不起作用。

我对这段代码不是很熟悉，但我的印象是JS让动画面板向下滑动，而不是CSS动画。

目前我的代码如下所示：https://jsfiddle.net/joshuacsk/yw7eygxk/ 和问题的JS一样：

JS

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";
    } 
  }
}

有没有办法使用上面的代码样式关闭其他标签，或者还有其他更好的方法吗？

Answer 1

您可以添加：

for(j = 0; j < acc.length; j++) {
    acc[j].nextElementSibling.style.maxHeight = null;
}

关闭所有标签。请参阅我的答案底部的摘录。

PS：面板向上/向下滑动的动画是CSS，JavaScript只会通过修改高度触发它。

＆＃13;

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

＆＃13;

.accordiontext{
  font-family:futura-pt;
  font-weight:300;
  font-size:11;
}
button{
    font-family:futura-pt;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.2em;
    box-sizing:border-box;
    box-shadow: inset 0 0 0 3px #202020;
    position:relative;
    vertical-align:middle;
    border: 0;
}
button.accordion {
    background-color: #fff;
    color: #202020;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    text-align: left;
    background: linear-gradient(to right, #202020 50%, #ffffff 50%);
    background-size: 205% 100%;
    background-position:right bottom;
    transition:all 1s ease;
}

button.accordion.active, button.accordion:hover {
    background-position:left bottom;
    color: #ffffff;
    
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 8px 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

button.accordion:after {
    content: '\e009'; /* Unicode character before click  */
    color: #202020;
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: normal;
    float: right;
    margin-right: 12px;
    transition: all 0.3s ease-in
   
}

button.accordion.active:after {
    content: "\e006"; /* Unicode character after click */
    color: #ffffff;
}

＆＃13;

<div class="accordionholder">
<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>
</div>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

.accordiontext{
  font-family:futura-pt;
  font-weight:300;
  font-size:11;
}
button{
    font-family:futura-pt;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.2em;
    box-sizing:border-box;
    box-shadow: inset 0 0 0 3px #202020;
    position:relative;
    vertical-align:middle;
    border: 0;
}
button.accordion {
    background-color: #fff;
    color: #202020;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    text-align: left;
    background: linear-gradient(to right, #202020 50%, #ffffff 50%);
    background-size: 205% 100%;
    background-position:right bottom;
    transition:all 1s ease;
}

button.accordion.active, button.accordion:hover {
    background-position:left bottom;
    color: #ffffff;
    
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 8px 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

button.accordion:after {
    content: '\e009'; /* Unicode character before click  */
    color: #202020;
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: normal;
    float: right;
    margin-right: 12px;
    transition: all 0.3s ease-in
   
}

button.accordion.active:after {
    content: "\e006"; /* Unicode character after click */
    color: #ffffff;
}

＆＃13;

<div class="accordionholder">
<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>
</div>

＆＃13;

单击关闭其他手风琴（不切换类）

2 个答案: