javascript - 展开和折叠多个缩略图

Question

您好，我在这里的第一个问题，请客气!我正在尝试切换 div 的展开和折叠，我想知道如何使每个展开时顶部的 3 个缩略图都保留在那里？第 3 个缩略图工作正常，其他 2 个将缩略图拖到展开图像下。

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
      
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

.row {
  width: 50%;
  height: 300px;
  background-color: red;
}
.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.row {
  margin-top: 20px;
}
.container .content {
    display: none;
    padding : 5px;
}

.content-p {
  width: 70%;
    float: right;
    padding-right: 20px;
    text-align: justify;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <img src="https://placebear.com/100/100" class="header"/>
    <div class="content">
        <img class="content-img" src="https://placebear.com/300/300" alt="" />
      <p class='content-p'>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>
  
  <img src="https://placebear.com/100/100" class="header"/>
    <div class="content">
        <img class="content-img" src="https://placebear.com/300/300" alt="" />
      <p class='content-p'>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>
  
  <img src="https://placebear.com/100/100" class="header"/>
    <div class="content">
        <img class="content-img" src="https://placebear.com/300/300" alt="" />
      <p class='content-p'>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>
</div>

<div class="row"></div>

Answer 1

问题是您将 content 放在了错误的位置。您应该有一个容器，其中较小的缩略图被分组，然后在第一个包含较大内容的容器下面有另一个容器。

然后您必须更改您的 javascript，因此您应该找到一种不同的方法将每个缩略图与其较大的版本链接起来，而不是使用 .next()。