0

jQueryには、ヘッダーを非表示にしてから表示する2つの関数があり、ボタンを交換して、ヘッダーが非表示のときに「ヘッダーを表示」ボタンが表示され、その逆も同様です。それらは次のとおりです。

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

これらの 2 つの機能を 1 つにまとめて、簡潔さと効率性を高める方法はありますか?

4

4 に答える 4

5

性能差は全くありません。

パラメータを使用して 1 つの関数ですべてを記述しようとすると、読みにくくなります。

そのままで、大丈夫です。

今あなたの質問に答えます：

これら2つの機能を組み合わせる方法はありますか...

はい

これらの 2 つの機能を 1 つにまとめて、効率と効率を高める方法はありますか?

いいえ、他の回答のコードを読んでください。彼らはより効率的ですか？いいえ

于 2012-11-01T19:05:33.927 に答える
3

.header_controlこれらの 2 つの sのみがあると仮定します。

$('.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
});​
于 2012-11-01T19:11:16.030 に答える
0 
$('#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();
});
于 2012-11-01T19:04:23.713 に答える
0 
$('#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();
});
于 2012-11-01T19:05:29.823 に答える