javascript - 使用一个代码在多个 div 上切换“阅读更多”和“阅读更少”

Question

下面给出的 JavaScript 代码用于打开和关闭我的页面中的多个 div。下面的代码打开和关闭网站中的多个 div，但当我打开一个 div 时，文本“阅读更多”和“阅读更少”应用于所有 div。

<div class="box">

<li>GST Registration</li> 
<li>Final Proprietorship Registration in 10 Working Days</li>

<div class="content-new"> <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>                   
</div>

<div class="show_hide_new">
Read More
</div>

</div> <!-- box closed -->




Below I repeat above code just explain that multiple divs should show read more and real less individually. 

<div class="box">

<li>GST Registration</li> 
<li>Final Proprietorship Registration in 10 Working Days</li>

<div class="content-new"> <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>                   
</div>

<div class="show_hide_new">
Read More
</div>

</div> <!-- box closed -->

<script >
$(document).ready(function () {
    $(".content-new").hide();
    $(".show_hide_new").on("click", function () {
        var txt = $(".content-new").is(':visible') ? 'Read More' : 'Read Less';
        $(".show_hide_new").text(txt);
        $(this).prev('.content-new').slideToggle(100);
    });
});
</script>

感谢您的帮助

Answer 1

这是你想要的吗？

$(document).ready(function() {
  $(".content-new").hide();
  $(".show_hide_new").on("click", function() {
    var txt = $(this).prev(".content-new").is(':visible') ? 'Read More' : 'Read Less';
    $(this).text(txt);
    $(this).prev('.content-new').slideToggle(100);
  });
});

我改变了两件事，首先我将 $(".content-new").is(':visible') 更改为 $(this).prev( ".content-new").is(':visible')
其次，我将 $(".show_hide_new").text(txt); 更改为 $(this).text(txt);

演示

$(document).ready(function() {
  $(".content-new").hide();
  $(".show_hide_new").on("click", function() {
    var txt = $(this).prev(".content-new").is(':visible') ? 'Read More' : 'Read Less';
    $(this).text(txt);
    $(this).prev('.content-new').slideToggle(100);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">

  <li>GST Registration</li>
  <li>Final Proprietorship Registration in 10 Working Days</li>

  <div class="content-new">
    <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>
  </div>

  <div class="show_hide_new">
    Read More
  </div>

</div>
<!-- box closed -->




Below I repeat above code just explain that multiple divs should show read more and real less individually.

<div class="box">

  <li>GST Registration</li>
  <li>Final Proprietorship Registration in 10 Working Days</li>

  <div class="content-new">
    <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>
  </div>

  <div class="show_hide_new">
    Read More
  </div>

</div>
<!-- box closed -->