Question

我在jQuery中有两个函数可以隐藏然后显示标题，并且还会将按钮交换出来，这样当隐藏标题时，会出现“show header”按钮，反之亦然。它们如下：

$('#close_header').click(function() {
    $('#header').animate({ top: '-=150px' }, 500);
    $(this).toggle();
    $('#open_header').toggle();
});

$('#open_header').click(function() {
    $('#header').animate({ top: '+=150px' }, 500);
    $(this).toggle();
    $('#close_header').toggle();
});

与之相关的标记如下：

<img src="images/close.png" id="close_header" class="header_control fadein button">
<img src="images/open.png" id="open_header" class="header_control fadein button">
<div id="header">
    *Header content.*
</div>

为了整洁和效率，有没有办法将这两个功能合并为一个？

Answer 1

绝对没有性能差异。

如果您尝试在一个带参数的函数中编写它，那么它的可读性就会降低。

保持这种状态，没关系。

现在回答你的问题：

有没有办法将这两个功能结合起来......

是

为了整洁和效率，有没有办法将这两个功能合并为一个？

不。阅读其他答案中的代码，它们更整洁吗？他们更有效率吗？否

Answer 2

假设你只有那两个.header_control：

$('.header_control').click(function() {
    var dist = (this.id=="open_header") ? '+=150px' : '-=150px';
    $('#header').animate({top: dist}, 500);
    $('.header_control').toggle(); // both at once
});

很难从您的代码示例中了解到，但您甚至可以使用简单的.slideToggle()替换.animate(...)方法：

$('.header_control').click(function() {
    $('#header').slideToggle(500);
    $('.header_control').toggle(); // both at once
});

Answer 3

$('#open_header, #close_header').on('click', function(e) {
    var q = this.id=='open_header';
    $('#header').animate({ top: q?'+':'-'+'=150px' }, 500);
    $(this).toggle();
    $('#'+(q?'close':'open')+'_header').toggle();
});

Answer 4

$('#close_header, #open_header').click(function() {
    var isClose = this.id == 'close_header';
    var minPlus = isClose ? '-' : '+';
    $('#header').animate({ top: minPlus + '=150px' }, 500);
    $(this).toggle();
    $('#' + isClose ? 'open_header': 'close_header').toggle();
});

这两个jQuery函数可以组合成一个更高效的函数吗？

4 个答案: