凝聚/優化jQuery代碼

我有下面的代碼滑動隱藏的內容區域。它有效，但我懷疑它太笨拙，可能會觸發太多請求或事件。有人可以提出一種更有效地結合這些功能的方法嗎？凝聚/優化jQuery代碼

$(".toggler").click(function (event){ 
event.stopPropagation(); 
$("#mobile-top").animate({'height':'toggle'}, 250); 
}); 

$("#mobile-top").click(function(event){ 
event.stopPropagation(); 
}); 

$('.toggler').toggle(function() { 
    $(this).html('Close This Box <em class="fa fa-chevron-up"></em>'); 
}, function() { 
    $(this).html('Connect With Us! <em class="fa fa-chevron-down"></em>'); 
}); 

$('html').click(function(){ 
$("#mobile-top").slideUp(); 
$(".toggler").html('Connect With Us! <em class="fa fa-chevron-down"></em>'); 
});

來源

2014-09-29 George Chanturidze

工作代碼要改進的建議通常屬於上http://codereview.stackexchange.com。 – jfriend00 2014-09-29 23:10:49

我覺得可以通過使用變量來改善代碼，特別是當你多次使用某個選擇器時。並嘗試使用ID的不是類。

編輯

UPDATED JSFIDDLE

這裏是工作，當你在HTML區域外單擊不會感到困惑的代碼。（注意，雖然命名變量不能包含 - 像我之前提出的字符）

$(document).ready(function(){ 
    var toggler = $("#toggler"); 
    var mobileTop = $("#mobile-top"); 
    //top drop-down content animation 
    toggler.click(function(event){ 
    event.stopPropagation(); 
    mobileTop.slideToggle(250); 
    $(this).toggleClass('open'); 
    $(this).html('Connect With Us! <em class="fa fa-chevron-down"></em>'); 
    $(".open").html('Close This Box <em class="fa fa-chevron-up"></em>'); 
    }); 
    $('html').click(function(){ 
    mobileTop.slideUp(250); 
    toggler.html('Connect With Us! <em class="fa fa-chevron-down"></em>'); 
    toggler.removeClass('open'); 
    }); 
    $(mobileTop).click(function(event){ 
    event.stopPropagation(); 
    }); 
});

而且這應該更有效率。

一個良好的閱讀： http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551

來源

2014-09-29 23:03:54 Amir5000

謝謝，我剛剛注意到一個問題，也許你可以幫忙弄清楚。當我放下它時，然後點擊區域外部（'html'）將其滑回，然後再次嘗試將其放下，順序顛倒。即它已經關閉時顯示「關閉此盒子」，反之亦然。我認爲點擊區域外（這行：$（「＃toggler」）。html（'Connect With Us！'）;）重置排序。有沒有解決的辦法？ – 2014-09-29 23:24:47

如果你可以創建一個JSFIDDLE或CodePen，我可以幫你確定更多 – Amir5000 2014-09-30 03:52:04

我創建了jsfiddle，但由於某種原因它的工作方式不同：http://jsfiddle.net/8e1auupr/。你可以看看更精確的版本演示：http://76.163.3.49/ – 2014-09-30 16:14:33

凝聚/優化jQuery代碼

回答

相關問題