Question

我刚刚开始学习jQuery，并且正在尝试在我的个人网站上创建一个部分，其中有一个连续的图像列表，当有人点击图像时会显示一个段落。

代码 - https://jsfiddle.net/ceo123/my4Lhkkv/3/

<section>
  <img class="expand-one" src="" alt="Number 1" />
  <p class="content-one">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  <img class="expand-two" src="" alt="Number 2" />
  <p class="content-two">This is the second paragraph.</p>

  <img class="expand-three" src="" alt="Number 3" />
  <p class="content-three">This rocks! Let's work on some more stuff.</p>
</section>

段落应该 -

出现在img下面，左边对齐
当选择另一个img时，p将更改为相应的选择
p show中的文字占据了部分的宽度
如果屏幕宽度减小且imgs堆叠，p仍应在其img行和下一行下展开

我的问题 - 如何让滑块的方向向下滑动，然后每次在部分中将p文本左对齐？谢谢！

编辑＃1：我更新了我的代码。到达远，但不能扩大部分的中心。

编辑＃2：解决方案 - https://jsfiddle.net/92uhs075/2/ 在没有jQuery的情况下解决了问题，只使用了html和css。

Answer 1

我可能会离开。这是你在找什么？ https://jsfiddle.net/my4Lhkkv/4/

<section>
<div class="images">
  <img class="expand-one" src="" alt="Number 1" />
  <img class="expand-two" src="" alt="Number 2" />
  <img class="expand-three" src="" alt="Number 3" />
</div>

<div class="text">
  <p class="content-two">This is the second paragraph.</p>
  <p class="content-one">Lorem ipsum dolor sit amet,
  consectetur adipisicing elit.</p>
  <p class="content-three">This rocks! Let's work on some more stuff.</p>
</div>
</section>

img {
  float: left;
  height: 200px;
  width: 200px;
  background: lightblue;
  margin: 10px;
}

p {
  display: none;
}

.text {
  float: left;
}

水平手风琴切换

1 个答案: