展开和折叠多个缩略图

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()。