凝聚/优化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代码

回答

相关问题