CSS max-height 过渡只影响其他div？

Question

我创建了一个垂直标题列表，单击时每个标题都会展开以显示图像和一些文本。我已经使用 jQuery 创造了这种效果。

但是，当我单击一个标题时，其他标题由于过渡效果而平滑地移开，image/text 本身就出现了。我想使用三个不同的函数并不是解决这个问题的最有效方法，但请耐心等待，因为我这周才开始学习 html 等...

谢谢！

HTML:

<h1>Paintings</h1>
<article>
  <h2 class="one">Picture 1</h2>
  <div class="first"><img src="http://www.derekmccrea.50megs.com/images/framed-oil-painting.jpg">
  <p>Some text</p></div>
</article>
<article>
  <h2 class="two">Picture 2</h2>
  <div class="second"><img src="http://i.ebayimg.com/00/s/NDA4WDUwMA==/z/f8IAAOxyRhBSs-0m/$_35.JPG?set_id=2">
  <p>Some more text.</p></div>
</article>
<article>
  <h2 class="three">Picture 3</h2>
  <div class="third"><img src="http://www.culture24.org.uk/asset_arena/9/93/74399/v0_master.jpg">
  <p>Further text.</p></div>
</article>

CSS:

h2 {
  margin-bottom: 0;
  z-index: 1;
  position: relative;
}
article {
  text-align: center;
  margin-bottom: 30px;
}
div {
  opacity: 0;
  max-height: 0;
  transition: max-height .5s;
  -webkit-transition: max-height .5s;
  -moz-transition: max-height .5s;
}
.show-image {
  opacity: 1;
  max-height: 350px;
}

JavaScript:

<script>
  $('.one').on('click', function() {
  $('.first').toggleClass('show-image')
});
  $('.two').on('click', function() {
  $('.second').toggleClass('show-image')
});
  $('.three').on('click', function() {
  $('.third').toggleClass('show-image')
});
</script>

Answer 1

好的，我已经做了一些事情。首先，我使用了 .heading 和 .info 类并精简了你的 JS。

HTML:

<h1>Paintings</h1>
<article>
    <h2 class="heading">Picture 1</h2>
    <div class="info">
        <img src="http://www.derekmccrea.50megs.com/images/framed-oil-painting.jpg" />
        <p>Some text</p>
    </div>
</article>
<article>
    <h2 class="heading">Picture 2</h2>
    <div class="info">
        <img src="http://i.ebayimg.com/00/s/NDA4WDUwMA==/z/f8IAAOxyRhBSs-0m/$_35.JPG?set_id=2" />
        <p>Some more text.</p>
    </div>
</article>
<article>
    <h2 class="heading">Picture 3</h2>
    <div class="info">
        <img src="http://www.culture24.org.uk/asset_arena/9/93/74399/v0_master.jpg" />
        <p>Further text.</p>
    </div>
</article>

JS:

$('.heading').on('click', function() {
    $(this).next('.info').toggleClass('show-image')
});

我通过将 overflow: hidden 添加到 div 元素来更改 CSS，以便在过渡期间显示图像。我还将 max-height 增加到 400px 以便图片 1 的文本适合。

CSS:

h2 {
    margin-bottom: 0;
    z-index: 1;
    position: relative;
}
article {
    text-align: center;
    margin-bottom: 30px;
}
div {
    opacity: 0;
    max-height: 0;
    transition: max-height .5s;
    -webkit-transition: max-height .5s;
    -moz-transition: max-height .5s;
    overflow: hidden;
}
.show-image {
    opacity: 1;
    max-height: 400px;
}

您可以在此处查看实际效果：http://jsfiddle.net/PiranhaGeorge/bhj1eh53/

CSS max-height 过渡只影响其他div？

CSS max-height transition only affecting other divs?

jquery

css-transitions