I have this old jquery script for progressive disclosure: (notice the $(this).text('more...') code changes the button text.
<!--for more/less progressive disclosure-->
<script >
$(document).ready(function () {
$('div.view').hide();
$('div.slide').toggle(function () {
this.style.background = '#7D4F4E';
$(this).text('less...').siblings('div.view').fadeIn('fast');
开发者_运维百科}, function () {
this.style.background = '#B0B07F';
$(this).text('more...').siblings('div.view').fadeOut('fast');
});
});
</script>
It works OK, but I'd to use the one below and I want this jquery script to have the same text change (for the button). How do I apply the text change in the above code to the new script in the bottom?
<!--a real good progressive disclosure-->
<script type="text/javascript">
$(document).ready(function () {
$('.mover').hide();
$('#slideToggle').click(function () {
$(this).siblings('.mover').slideToggle();
});
$('.toggleSlow').click(function () {
$(this).siblings('.mover').toggle('normal');
});
$('#fadeInOut').toggle(function () {
$(this).siblings('.mover').fadeIn('normal');
}, function () {
$(this).siblings('.mover').fadeOut('normal');
});
$('#animate').click(function () {
$(this).siblings('.mover').slideDown(5500).fadeOut(7300);
});
});
</script>
I would give this a shot:
Edited to include callback on toggle()
function:
$(document).ready(function() {
$('.mover').hide();
$('#slideToggle').click(function() {
$(this).siblings('.mover').slideToggle();
});
$('.toggleSlow').click(function() {
var $mover = $(this).siblings('.mover');
var toggler = this;
var text;
$mover.toggle('normal', function() {
text = ($mover.is(':visible')) ? 'Hide' : 'Show';
$(toggler).text(text);
});
});
$('#fadeInOut').toggle(function() {
$(this).siblings('.mover').fadeIn('normal');
},
function()
{
$(this).siblings('.mover').fadeOut('normal');
});
$('#animate').click(function() {
$(this).siblings('.mover').slideDown(5500).fadeOut(7300);
});
});
精彩评论