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); 


} 

背后的逻辑是这样的：

• 用户点击隐藏
• 内容被隐藏
• 内容封装器被替换为薄的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); 
} 

Answer 2

你可以加快代码只是在JS首先得到每一个元素，并连锁的CSS修改，具体如下：

function hide(boxtohide, boxtomodify, expandbox) { 

var hideElem = document.getElementById(boxtohide), 
    modElem = document.getElementById(boxtomodify), 
    expandElem = document.getElementById(expandbox), 
    cssObj = { 'background-image' : 'url("images/new/date.png")', 
       'height' : '69px' }; 

$(hideElem).hide(300); 
$(modElem).css(cssObj); 
$(expandElem).show(300); 

} 

Answer 3

我敢打赌，你正在接近这样太复杂了，使用jQuery你可以做这样的事情用最少的代码，例如：

jsfiddle

$('.toggle').on('click', 'h3', function() { 
    var $content = $(this).next('.content'); 
    $content.slideToggle('fast'); 
});