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

Question

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

$('#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_controls：

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

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

$('.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();
});