目前,我正在构建一个简单的手风琴布局,相邻两列。我目前面临的唯一问题是:

当用户单击手风琴之一时,它将添加一个“ is-open”类以打开其下方的内容。遗憾的是,这也会使单击手风琴旁边的列的高度相同。我希望每个高度都为0,直到它具有“ is-open”类。

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



$('.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>





当您单击右上列时,您将看到左上列获取右上列的高度。我正在尝试删除此文件,但找不到解决方案。

任何帮助表示赞赏!

最佳答案

$('.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>





期望的结果只能通过职位来实现。

10-07 19:42
查看更多