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/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我已使用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)是类expand的引用

＆＃13;

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

＆＃13;

jQuery切换跨度文本无法正常工作

3 个答案: