Question

我创建了一个垂直的标题列表，每个标题都会展开以显示图像，单击时会显示一些文本。我用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>

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？

1 个答案: