[英]Change div text with jQuery Toggle
使用slideToggle
,如何更改文本关闭/显示? 我做了一个简单的,但无法将文本更改回来。
这是我做的:
$(document).ready(function(){ $('.open').click(function(){ $('.showpanel').slideToggle('slow'); $(this).text('close'); }); $('.open2').click(function(){ $('.showpanel2').slideToggle('slow'); $(this).text('close'); }); });
body{ font-size:20px; } #box{ border:2px solid #000; width:500px; min-height:300px; } .open,.open2 { width:450px; height:50px; background:blue; margin:5px auto 0 auto; color:#fff; } .showpanel,.showpanel2{ width:450px; height:300px; margin:0 auto 10px auto; background:red; display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box"> <div class="open">Show</div> <div class="showpanel">This is content</div> <div class="open2">Show</div> <div class="showpanel2">This is content</div> </div>
您可以使用is()
断言方法来检查面板在动画的回调中是打开还是关闭,并相应地设置文本 - http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){
var link = $(this);
$('.showpanel').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('close');
} else {
link.text('open');
}
});
});
只需添加一个简单的if语句来测试文本就像这样
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
if($(this).text() == 'close'){
$(this).text('Show');
} else {
$(this).text('close');
}
});
喜欢这个DEMO
不是最漂亮的方法,但它只在一个语句中完成工作。
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
这是一个更新版本http://jsfiddle.net/9EFNK/1/
您可以在关闭/打开时简单地切换类,对该类执行检查并相应地更改包含的文本
if( $(this).hasClass('active') )
$(this).text('open');
else
$(this).text('Show');
$(this).toggleClass('active');
使用.toggle()
这是工作演示
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
}).toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('Show');
});
检查这可能是用户问题解决小提琴
试试这个演示
$(document).ready(function(){
$('.open').toggle(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel').slideToggle('slow');
$(this).text('Show');
});
$('.open2').toggle(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel2').slideToggle('slow');
$(this).text('Show');
});
});
用这个
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
这是你如何使用它
jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; $('[data-toggle="offcanvas"]').click(function () { $(this).toggleText(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <button data-toggle="offcanvas" data-alt-text="Close">Open</button>
你甚至可以使用HTML,只要它的html编码正确
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.