Question

以下代码执行此操作。当我第一次单击该按钮时，它会显示相应的文本。当我再次点击相同的按钮时，它会淡出并淡入。但是，如果第二次单击该按钮而不是淡出然后淡入，我希望相应的文本消失。

$(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

HEADER2

header3

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

头1

的text1

HEADER2

header3

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

头1

HEADER2

header3

有人知道怎么做吗？

Answer 1

您可以使用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>

Answer 2

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

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

Answer 3

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

使用切换隐藏和显示内容

根据@Tushar的建议

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

Answer 4

您可以使用toggle（）函数：

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

DEMO

Answer 5

您尝试此代码

$(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");
      }

  });
});

Working Demo

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

5 个答案: