目前,我正在构建一个简单的手风琴布局,相邻两列。我目前面临的唯一问题是:
当用户单击手风琴之一时,它将添加一个“ 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>
期望的结果只能通过职位来实现。