Javascript 压缩/优化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>');
});

$（“.toggler”）。单击（函数（事件）{
event.stopPropagation（）；
$（“#移动桌面”）.animate（{'height'：'toggle'}，250）；
});
$（“#移动桌面”）。单击（功能（事件）{
event.stopPropagation（）；
});
$（'.toggler'）.toggle（函数（）{
$（this.html（'关闭此框'）；
}，函数（）{
$（this.html（'connectwithus！'）；
});
$（'html'）。单击（函数（）{
$（“#移动桌面”）.slideUp（）；
$（“.toggler”）.html（'connectwithus！'）；
});

我认为可以通过使用变量来改进代码，尤其是在多次使用某个选择器时。 并尝试使用ID的非类

编辑

下面是正在工作的代码，当您在HTML区域中单击外部时不会感到困惑。（请注意，在命名变量时，它不能像我以前那样包含-字符）

$（文档）.ready（函数（）{
var-toggler=$（“#toggler”）；
var mobileTop=$（“#移动桌面”）；
//顶部下拉式内容动画
切换器。单击（函数（事件）{
event.stopPropagation（）；
移动终端滑动开关（250）；
$（this.toggleClass（'open'）；
$（this.html（'connectwithus！'）；
$（“.open”）.html（“关闭此框”）；
});
$（'html'）。单击（函数（）{
mobileTop.slideUp（250）；
html（'connectwithus！'）；
toggler.removeClass（'open'）；
});
$（mobileTop）。单击（函数（事件）{
event.stopPropagation（）；
});
});

这也应该更有效

一本好书：

---

您希望改进建议的工作代码通常属于您的工作代码。谢谢，我刚刚注意到一个问题，也许您可以帮助解决。当我把它放下来，然后在区域（'html'）外单击，将其向上滑动，然后再次尝试放下来，顺序相反。i、 e.当盒子已经关闭时，上面写着“关闭这个盒子”，反之亦然。我认为在区域外单击（$（“#toggler”）.html（'Connect With Us！'）；）可以重置排序。有没有办法解决这个问题？如果你能创建一个JSFIDLE或CodePen，我肯定可以帮你做更多的事情。我创建了JSFIDLE，但由于某些原因它不能以同样的方式工作：。您可以查看演示以获得更准确的版本：@GeorgeC检查我的更新答案它应该可以解决您的问题，并且使用动画切换和slideUp会导致它无法平滑滑动，因此我只是在所有实例中都坚持使用slideToggle。另外，谢谢，为了防止在人们单击下拉区域时向上滑动，代码需要：jQuery（mobileTop）；

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