gpt4 book ai didi

javascript - 将 'Reveal All' 按钮替换为 'Reveal Less' onClick?

转载 作者:行者123 更新时间:2023-11-28 20:34:57 27 4
gpt4 key购买 nike

我当前正在表格上使用“全部显示”按钮来显示所有表格条目:

http://jsfiddle.net/SCpgC/

但是,我想知道,有没有办法可以在单击时将“全部显示”切换为显示“较少显示”,以便用户可以返回到之前的 View ?

这是我当前使用的 JavaScript:

var numShown = 2; // Initial rows shown & index

$(document).ready(function() {
// Hide rows and add clickable div

$('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');

$('.more').click(function() {
var numRows = $(this).prev().find('tr').show();
$(this).remove();
})
});

非常感谢您的指点:-)

最佳答案

这将是双向的...如果显示全部,则显示 div,如果显示较少,则隐藏 div

试试这个

working fiddle here

$('.more').click(function() {
if ($(this).hasClass("show")) {
var numRows = $(this).prev().find('tr').show();
$(this).text('Reveal Less');
$(this).removeClass('show').addClass('hide');
}
else {
$(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide();
$(this).removeClass('hide').addClass('show');
$(this).text('Reveal All');
}
});

并使用一些效果fadeIn()fadeOut()

fiddel with effect

关于javascript - 将 'Reveal All' 按钮替换为 'Reveal Less' onClick?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15611585/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com