分享内容的手风琴 [英] Accordion with shared content

问题描述

我有这个手风琴（javascript），显示点击按钮的内容。但是，我想要做的是让内容在第一行下对齐。我有一排7个按钮，下面有7个按钮，依此类推。
是否有一种方法可以让每个按钮的内容在整行下面对齐？因此，如果我按下按钮1，则内容将与第一行下方对齐，并且如果按下按钮9，则内容将在第二行下方对齐等。

代码：

var acc = document.getElementsByClassName（r​​ow）; var i ; for（i = 0; i< acc.length; i ++）{acc [i] .addEventListener（click，function（）{var panel = this.nextElementSibling; if（panel.style.maxHeight）{panel。 style.maxHeight = null;} else {panel.style.maxHeight = panel.scrollHeight +px;}}）;}

  .row {color：grey;宽度：13％;过渡时间：0.4s; margin：0 auto;}。panel {max-height：0;过渡：最大高度0.2s缓出;溢出：隐藏;宽度：100px;向左飘浮; < button class =     行 > 1< / button>< div class =panel> < p> 1内容< / p>< / div>< button class =row> 2< / button>< div class =panel> < p> 2内容< / p>< / div>< button class =row> 3< / button>< div class =panel> < p> 3< / p>< / div>< button class =row> 4< / button>< div class =panel> < p> 4内容< / p>< / div>< button class =row> 5< / button>< div class =panel> < p> 5内容< / p>< / div>< button class =row> 6< / button>< div class =panel> < p> 6内容< / p>< / div>< button class =row> 7< / button>< div class =panel> < p> 7内容< / p>< / div>< button class =row> 8< / button>< div class =panel> < p> 8内容< / p>< / div>< button class =row> 9< / button>< div class =panel> < p> 9内容< / p>< / div>< button class =row> 10< / button>< div class =panel> < p> 10内容< / p>< / div>< button class =row> 11< / button>< div class =panel> < p> 11内容< / p>< / div>< button class =row> 12< / button>< div class =panel> < p> 12内容< / p>< / div>< button class =row> 13< / button>< div class =panel> < p> 13内容< / p>< / div>< button class =row> 14< / button>< div class =panel> < p> 14内容< / p>< / div>  

h2_lin>解决方案

我强烈建议在这种情况下使用css flex-box。
使用flex-box，您只需首先创建一个包含所有行的包装（在提供的演示中为.column），然后创建两行（在提供的演示中为.verse），然后在同一个分区上同时持有两个按钮及其内容。整个结构将以如下方式显示：

 < div class =column> 
< div class =verse> 
< div> 
 / *您的按钮和内容* / 
< / div> 
< / div> 
< / div> 
  

以下是一个工作 demo - 我相信它比上面的文字更好地解释了解决方案。

I have this accordion (javascript) that shows the content of the clicked button. But, what I want to do is to have the content aligning under the first row. I have a row with 7 buttons, and underneath I have 7 more and so on. Is there a way of making the content of every button aligning underneath the whole row? So if I press button 1, the content will align underneath the first row, and if I press button 9, the content will align under row 2 and so on.

code:

var acc = document.getElementsByClassName("row");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.row {
    color: grey;
    width: 13%;
    transition: 0.4s;
  margin: 0 auto;

}

.panel {
    max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
    width: 100px;
    float: left;
    background-color: yellow;
}

<button class="row"> 1</button>
<div class="panel">
  <p>1 content</p>
</div>

<button class="row"> 2</button>
<div class="panel">
  <p>2 content </p>

</div>

<button class="row"> 3</button>
<div class="panel">
   <p>3</p>

</div>
<button class="row"> 4</button>
<div class="panel">
   <p>4 content</p>

</div>
<button class="row"> 5</button>
<div class="panel">
   <p>5 content</p>

</div>
<button class="row"> 6</button>
<div class="panel">
   <p>6 content</p>

</div>
<button class="row"> 7</button>
<div class="panel">
   <p>7 content</p>

</div>
<button class="row"> 8</button>
<div class="panel">
   <p>8 content</p>

</div>
<button class="row"> 9</button>
<div class="panel">
   <p>9 content</p>

</div>
<button class="row"> 10</button>
<div class="panel">
   <p>10 content</p>

</div>
<button class="row"> 11</button>
<div class="panel">
   <p>11 content</p>

</div>
<button class="row"> 12</button>
<div class="panel">
   <p>12 content</p>

</div>
<button class="row"> 13</button>
<div class="panel">
   <p>13 content</p>

</div>
<button class="row"> 14</button>
<div class="panel">
   <p>14 content</p>

</div>

解决方案

I would strongly advise to make use of css flex-box in such scenario. Using flex-box you would simply have to first create a wrapper holding all rows (.column on the provided demo) then two rows (.verse on the provided demo) and then on top of that a division holding both button and its content. The whole structure would look in the following way:

<div class="column>
    <div class="verse">
        <div>
            /* your buttons and contents */
        </div>
    </div>
</div>

Here is a working demo - I believe it explains the solution better than the above text.

这篇关于分享内容的手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！