[英]Showing and hiding text in response to a button click
下面的代码就是这样做的。 当我第一次单击按钮时,它会显示相应的文本。 当我再次单击同一个按钮时,它会淡出并淡入。但是,如果第二次单击该按钮,我希望相应的文本消失,而不是淡出然后淡入。
$(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
文本1
标题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");
});
$('.info').click(function(){
//$(this).next().fadeOut("slow");
$(this).next().toggle("slow");
});
使用切换来隐藏和显示某些东西
根据@Tushar 的建议
$('.info').click(function(){
//$(this).next().fadeOut("slow");
$(this).next().fadeToggle("slow");
});
您可以使用 toggle() 函数:
$(document).ready(function() {
$('.info').click(function() {
$(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");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.