jQuery 切换跨度文本不起作用

Question

我的结构是这样的：JSFiddle

我一直在参考其他人提出的各种类似问题，但这些解决方案对我不起作用。

所以我想要的是当我点击 "Show+" 时，将显示以下内容，文本将从 "Show+" 更改为 "Hide-"，它们可以切换。

我正在尝试使用 if 函数来实现此目的但无法正常工作...

if($(this).find('.expand').text()=="Show+"){
  $(this).find('.expand').text("Hide-");
}else{
  $(this).find('.expand').text("Show+");
}

有人对此有任何解决方案吗？非常感谢！

Answer 1

给你一个解决方案https://jsfiddle.net/sgwj3kbk/1/

$(function(){
  $('.title .expand').click(function(){
    $(this).closest("div").next(".dropdown").slideToggle("fast", function(){
      if($('.dropdown').css('display') == 'block'){
        $('.expand').text("Hide-");
      }else{
        $('.expand').text("Show+");
      }
    });  
  })
});

.title{
  background-color:#CCCCCC;
}
.dropdown{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="title">
    <span class="expand">Show+</span>
  </div>
  <div class="dropdown">
    Content ..... XXX
  </div>
</div>

我用 slideToggle 而不是 toggle。

slideToggle 将提供动画效果。

多一个动画的解决方案https://jsfiddle.net/sgwj3kbk/2/

希望对您有所帮助。

Answer 2

我根据您的示例进行了编辑。试试这个。 JSfiddle

$('.title .expand').click(function(){
  $(this).closest("div").next(".dropdown").toggle();
  if($(this).text()=="Show+"){
    $(this).text("Hide-");
  }else{
    $(this).text("Show+");
  }
});

Answer 3

从您的代码中删除 .find('.expand')，因为 $(this) 是 class expand

的引用

$(function(){
 $('.title .expand').click(function(){
   $(this).closest("div").next(".dropdown").toggle();
    
    if($(this).text()=="Show+"){
     $(this).text("Hide-");
    }else{
     $(this).text("Show+");
    }
  })
});

jQuery 切换跨度文本不起作用

jQuery toggle span text not functioning

html

jquery

accordion

toggle