时间戳

首页 > 解决方案 > 使用 jQuery 隐藏和显示当前 div

html - 使用 jQuery 隐藏和显示当前 div

问题描述

我如何隐藏以及如何隐藏 div，但只有当前 div，而不是全部。

JS：隐藏和显示块 div，但不仅仅是当前 div。

jQuery(document).ready(function () {
  jQuery(".btn_txt_after_click").on("click", function () {
    jQuery(".long_txt").toggle("slow");
    jQuery(".btn_txt_after_click").toggle("slow");
    jQuery(".btn_txt_before_click").toggle("slow");
    jQuery(".short_txt").toggle("slow");
  });

  jQuery(".btn_txt_before_click").on("click", function () {
    jQuery(".long_txt").toggle("slow");
    jQuery(".btn_txt_before_click").toggle("slow");
    jQuery(".btn_txt_after_click").toggle("slow");
    jQuery(".short_txt").toggle("slow");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>

<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>

http://jsfiddle.net/toyzmkg6/

标签： htmljquery

解决方案

您可以通过使用$(this)来定位当前事件发射器来做到这一点。

jQuery(document).ready(function () {
  jQuery(".btn_txt_after_click").on("click", function () {
    $(this).closest('.toggle_text_button').find(".long_txt").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_after_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_before_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".short_txt").toggle("slow");
  });

  jQuery(".btn_txt_before_click").on("click", function () {
    $(this).closest('.toggle_text_button').find(".long_txt").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_before_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_after_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".short_txt").toggle("slow");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>

<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>

推荐阅读