冷凝/优化jQuery代码

Question

我有以下代码用于向下滑动隐藏的内容区域。它有效，但我怀疑它太笨拙，可能会发出太多请求或事件。有人可以建议一种更有效地组合这些功能的方法吗？

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

Answer 1

我认为可以通过使用变量来改进代码，尤其是在多次使用某个选择器时。 并尝试使用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