如何在 CSS 中构建一个两列并排的简单手风琴布局？

Question

目前我正在构建一个简单的手风琴布局，其中 2 列彼此相邻。我目前面临的唯一问题是：

当用户点击其中一个手风琴时，它会添加一个“is-open”类来打开它下面的内容。可悲的是，这也会为单击的手风琴旁边的列提供相同的高度。我希望每个高度都为 0，直到它具有“开放”类。

我现在拥有的代码可以在这里找到：

$('.message').click(function() {
  $(this).toggleClass('is-open');
});

.message {
  max-width: 49%;
  float: left;
  margin: 0;
  background-color: transparent;
  position: relative;
  border-bottom: 1px solid blue;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
}

.is-open .message--body {
  max-height: none;
}

.message--header {
  padding: 1em;
  cursor: pointer;
  position: relative;
}

.message--header h4 {
  display: inline-block;
}

.message--body {
  padding: 0;
  max-height: 0;
  overflow: hidden;
}

.message--content {
  padding: 0 1em 1em 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <article class="message">
    <div class="message--header">
      <h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website 1</h4>
    </div>
    <div class="message--body">
      <div class="message--content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
      </div>
    </div>
  </article>
  <article class="message">
    <div class="message--header">
      <h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website 2</h4>
    </div>
    <div class="message--body">
      <div class="message--content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
      </div>
    </div>
  </article>
  <article class="message">
    <div class="message--header">
      <h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website</h4>
    </div>
    <div class="message--body">
      <div class="message--content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
      </div>
    </div>
  </article>
  <article class="message">
    <div class="message--header">
      <h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website</h4>
    </div>
    <div class="message--body">
      <div class="message--content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
      </div>
    </div>
  </article>
</div>

当您单击右上角的列时，您将看到左上角的列获得右上列的高度。我正在尝试删除它，但我找不到一个好的解决方案。

感谢任何帮助！

Answer 1

$('.message').click(function() {
	$(this).toggleClass('is-open');
});

.message {
	width: 49%;
	float:left;
	margin:0;
	background-color:transparent;
	position:relative;
	border-bottom:1px solid blue;
	border-left:1px solid blue;
	border-right:1px solid blue;
}
.is-open .message--body {
    max-height: none;
      position: absolute;
    width: 100%;
    background: #777;
    z-index: 9;
    min-width: 100%;
}
  
.message--header {
		padding:1em;
		cursor:pointer;
		position:relative;
}
.message--header h4 {
  display:inline-block;
}
.message--body {
  padding:0;
  max-height:0;
  overflow:hidden;
}
.message--content {
  padding: 0 1em 1em 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
	<article class="message">
		<div class="message--header">
			<h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website 1</h4>
		</div> 
		<div class="message--body">
			<div class="message--content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
			</div>
		</div>
	</article>
	
	<article class="message">
		<div class="message--header">
			<h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website 2</h4>
		</div> 
		<div class="message--body">
			<div class="message--content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
			</div>
		</div>
	</article>
	
	<article class="message">
		<div class="message--header">
			<h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website</h4>
		</div> 
		<div class="message--body">
			<div class="message--content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
			</div>
		</div>
	</article>
	
	<article class="message">
		<div class="message--header">
			<h4 class="is-size-6 has-text-purple has-text-weight-bold">Hosting van de website</h4>
		</div> 
		<div class="message--body">
			<div class="message--content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed imperdiet felis. Pellentesque aliquet molestie tortor sit ut aliquet lacus facilisis amet volutpat.
			</div>
		</div>
	</article>

</div>

想要的结果只有通过位置才能达到。看看这个

Answer 2

我刚刚通过使用 vue 更改样式解决了这个问题。这是固定的！