CSS最大高度过渡仅影响其他div？

伦敦男孩

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

但是，当我单击标题时，由于过渡效果，其他标题会平滑地移开，而图像/文本本身只会出现。我想使用三种不同的功能并不是解决此问题的最有效方法，但是请耐心等待，因为我本周才开始学习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>

食人鱼乔治

好的，我已经做了几件事。首先，我使用过.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: hiddendiv元素来更改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;
}