Question

手风琴有时向上打开，而不是向下打开，问题似乎是由“弯曲方向”引起的。这是一个问题，因为用户必须向上滚动到“ .content” div的可见开始部分。

手风琴位于右侧容器中，并设置为以“ flex-direction”出现在左侧容器上方。

如何使手风琴始终以“弹性方向”向下打开？

var acc = document.getElementsByClassName("label");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
	  this.classList.toggle("active");
	  this.nextElementSibling.classList.toggle("show");
	}
}

.stuff {
  background:#ebeef2;
  padding:1em;
  box-sizing:border-box;
}
.container {
  display:flex;
  flex-direction:column;
}
.left,
.right {
  width:100%;
}
.left {
  order:2;
  background:blue;
  padding:1em;
  box-sizing:border-box;
}
.right {
  order:1;
  background:green;
  padding:1em;
  box-sizing:border-box;
}
.label {
  font-size:2em;
  font-weight:bold;
  cursor: pointer;
  position:relative;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  padding:1em;
  box-sizing:border-box;
}
.content.show {
  opacity: 1;
  max-height: 100%;
}
.label:after {
  content: '+';
  font-size: 32px;
  right: 10px;
  top: 0;
  position: absolute;
  font-weight: 100;
}
.label.active:after {
  content: '-';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>

<div class="container">
  <div class="left">Left Side</div>
  <div class="right">
    <div class="label">Label 1</div>
    <div class="content">Content 1</div>
    
    <div class="label">Label 2</div>
    <div class="content">Content 2</div>
    
    <div class="label">Label 3</div>
    <div class="content">Content 3</div>
    
    <div class="label">Label 4</div>
    <div class="content">Content 4</div>
  </div>
</div>
  
<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>

Answer 1

在打开时将最大高度设置为100％实际上不会使高度变化产生动画效果。要使用CSS，您需要以固定单位（例如200px）设置精确值。这可能会导致屏幕跳动。由于已经包含了jquery，因此使用slideToggle()

可能会更好

为什么手风琴可以向上移动？

1 个答案: