添加wrap div后，使div的脚本彼此独立工作

时间：2018-08-13 22:03:15

标签： javascript jquery html css

我是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-->

1 个答案:

答案 0 :(得分：0)

通过换行，内容不是.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-->

相关问题
最新问题