javascript - 添加 wrap div 后使 div 的脚本相互独立

Question

我是 JavaScript 的新手，所以如果我的代码不好，请原谅。添加 wrap1 div 后，我不知道如何使脚本工作。

如果没有 wrap div，它几乎可以正常工作，但内容开始在 title div 中扩展。我使用 wrap 将它们分开，代码停止工作。该脚本仍会使用 .learn 对吗？

我已经尝试了一些东西，但都无济于事，这就是我尝试过的:

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

  $learn = $(this);
  //getting the next element
  $content = $learn.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
    $learn.text(function() {
      //change text based on condition
      return $content.is(":visible") ? "Learn less!" : "Learn More!";
    });
  });

});

.container {
  width: 500px;
  border: 1px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {
  display: table;
  float: left;
}

.container .learn {
  float: right;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->

</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->

</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->
  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

这是去掉的包装，这样您就可以看到我在说什么。这是我想要的，但正如您所见，样式看起来很糟糕....

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

  $learn = $(this);
  //getting the next element
  $content = $learn.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
    $learn.text(function() {
      //change text based on condition
      return $content.is(":visible") ? "Learn less!" : "Learn More!";
    });
  });

});

.container {
  width: 500px;
  border: 1px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {
  display: table;
  float: left;
}

.container .learn {
  float: right;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
  <div class="title">This is a title</div>
  <div class="learn">Learn More!</div>
  <div class="content">
    This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
  </div>
</div>
<!--container-->
<br>
<div class="container">
  <div class="title">This is a title</div>
  <div class="learn">Learn More!</div>
  <div class="content">
    This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
  </div>
</div>
<!--container-->

<br>

<div class="container">
  <div class="title">This is a title</div>
  <div class="learn">Learn More!</div>
  <div class="content">
    This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
  </div>
</div>
<!--container-->
<br>
<div class="container">
  <div class="title">This is a title</div>
  <div class="learn">Learn More!</div>
  <div class="content">
    This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
  </div>
</div>
<!--container-->
<br>

<div class="container">
  <div class="title">This is a title</div>
  <div class="learn">Learn More!</div>
  <div class="content">
    This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
  </div>
</div>
<!--container-->

Answer 1

使用换行，内容不是 .learn 之后的下一个元素。您必须上一层到容器，转到下一个容器，然后下到 .content

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

  $learn = $(this);
  //getting the next element
  $content = $learn.closest(".wrap1").next().find(".content");
  //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
    $learn.text(function() {
      //change text based on condition
      return $content.is(":visible") ? "Learn less!" : "Learn More!";
    });
  });

});

.container {
  width: 500px;
  border: 1px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {
  display: table;
  float: left;
}

.container .learn {
  float: right;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->

</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->

</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->

  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

<div class="container">
  <div class="wrap1">
    <div class="title">This is a title</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->
  <div class="wrap2">
    <div class="content">
      This is just some random content. This is just some random content. This is just some random content.<br>This is just some random content
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->