1

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

代码如下：

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 高手，所以这里可能有点不够深入，欢迎提出任何建议！

戴夫

4

3 回答 3

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);
}
于 2012-09-10T16:11:14.233 回答
1

您可以加速代码，只需首先在 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);

}
于 2012-09-10T16:14:04.857 回答
1

我敢打赌，您使用这种方式太复杂了，使用 jQuery，您可以用最少的代码完成这些事情，例如：

jsfiddle

$('.toggle').on('click', 'h3', function() {
    var $content = $(this).next('.content');
    $content.slideToggle('fast');
});
于 2012-09-10T16:25:01.893 回答