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);
  });
});

我已经更改了2件事，首先我将$(".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 -->

Answer 2

尝试一下：

jQuery(document).ready(function() {
  jQuery('.show_hide_new').on('click', function(){
    jQuery(this).parent().find('.content-new').toggle();
    jQuery(this).text(jQuery(this).text() == "Read More" ? "Read Less" : "Read More");
  });
});

默认情况下，新内容不显示

<div class="content-new" style="display: none;">

Answer 3

$(document).ready(function() {
  $(".content-new").hide();
  $(".show_hide_new").on("click", function() {
    $(this).prev('.content-new').slideToggle(100);
    console.log($(this).text().trim())
    if ($(this).text().trim() == "Read More") {
      $(this).text("Read Less");
    } else {
      $(this).text("Read More")
    }
  });
});

<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>
  <br>
</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>
  <br>

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

切换一个代码即可在多个div上读取更多和读取更少

3 个答案: