javascript - jquery展开折叠效率

Question

我刚刚在我们网站的一部分上实现了一个简单的展开/折叠系统。我尝试了几个现有的解决方案，但觉得调整网站以适应它需要付出太多努力，所以我写了自己的解决方案。

代码如下:

function hide(boxtohide, boxtomodify, expandbox) {

$('#' + boxtohide).hide(300);
$('#' + boxtomodify).css('background-image', 'url("images/new/date.png")');
$('#' + boxtomodify).css('height', '69px');
$('#' + expandbox).show(300);

}

function show(boxtohide, boxtomodify, expandbox, origheight, origurl) {
$('#' + expandbox).hide(300);
$('#' + boxtomodify).css('height', origheight);
$('#' + boxtomodify).css('background-image', 'url("'+origurl+'")');
$('#' + boxtohide).show(300);


}

背后的逻辑是这样的:

• 用户点击隐藏
• 内容已隐藏
• Contents wrapper 替换为更薄的 div，
• 内容包装器中显示的展开按钮(即它替换原始内容)

反之再次扩张。

对我来说，代码感觉有点笨拙，我不是 javascript 高手，所以这里可能有点不深入，欢迎任何建议!

戴夫

Answer 1

我建议的唯一明显变化是 $('#' + boxtomodify') 行，可以将其压缩为:

function hide(boxtohide, boxtomodify, expandbox) {
    $('#' + boxtohide).hide(300);
    $('#' + boxtomodify).css({
        'background-image' : 'url("images/new/date.png")'),
        'height' : '69px' });
    $('#' + expandbox).show(300);
}

function show(boxtohide, boxtomodify, expandbox, origheight, origurl) {
    $('#' + expandbox).hide(300);
    $('#' + boxtomodify).css({
        'height' : origheight
        'background-image' : 'url("'+origurl+'")' });
    $('#' + boxtohide).show(300);
}