显示和隐藏响应按钮单击的文本

Showing and hiding text in response to a button click

本文关键字：单击 文本 按钮 响应 隐藏 显示      更新时间：2023-09-26

下面的代码实现了这一点。当我第一次点击按钮时，它会显示相应的文本。当我再次点击同一个按钮时，它会逐渐消失。然而，如果第二次点击按钮，我希望相应的文本消失，而不是逐渐消失，然后逐渐消失。

$(document).ready(function(){
    $('.info').click(function(){
        $(this).next().fadeOut("slow");
    $(this).next().fadeIn("slow");
    });
});

HTML:

    <div>
        <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
        <h1 class="infoText" style="display:none">text 1</h1>
    </div>
    <div>
        <a class="info" href="javascript:void(0);">header 2</a>
        <h1 class="infoText" style="display:none">text 2</h1>
    </div>
    <div>
        <a class="info" href="javascript:void(0);">header 3</a>
        <h1 class="infoText" style="display:none">text 3</h1>
    </div>

它应该这样开始：

头1

头2

头3

当我点击header1时，它应该是这样的：

头1

text1

头2

头3

当我再次点击标题1时，它应该是这样的：

头1

头2

头3

有人知道怎么做吗？

您可以使用fadeToggle((切换具有渐变效果的显示

$(document).ready(function() {
  $('.info').click(function() {
    $(this).next().fadeToggle("slow");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>
  <h1 class="infoText" style="display:none">text 1</h1>
</div>
<div>
  <a class="info" href="javascript:void(0);">header 2</a>
  <h1 class="infoText" style="display:none">text 2</h1>
</div>
<div>
  <a class="info" href="javascript:void(0);">header 3</a>
  <h1 class="infoText" style="display:none">text 3</h1>
</div>

您可以使用toggle((来实现此目的。如果元素已经显示，它将隐藏该元素，否则它将显示该元素。

$('.info').click(function(){
     $(this).next().toggle("slow");
 });

您可以使用toggle((函数：

$(document).ready(function() {
  $('.info').click(function() {
    $(this).next().fadeToggle("slow");
  });
});

演示

$('.info').click(function(){
    //$(this).next().fadeOut("slow");
    $(this).next().toggle("slow");
});

使用切换来隐藏和显示

根据@Tushar 的建议

$('.info').click(function(){
    //$(this).next().fadeOut("slow");
    $(this).next().fadeToggle("slow");
});

您尝试此代码

$(document).ready(function() {
  $('.info').click(function() {
      var _self = $(this);
      if(_self.hasClass("active")) {
          _self.next().fadeOut("slow");
         _self.removeClass("active");
      } else {
           _self.next().fadeIn("slow");         
          _self.addClass("active");
      }
  });
});

工作演示

相关文章：