<分区>
<分区>
我创建了一个小脚本来处理低分辨率设备的响应式设计，并显示切换菜单而不是全宽菜单。 以下脚本对我来说工作正常，但对我来说这看起来有点乱。我需要哪些速记或实践才能使此代码更加简约和高效？
当浏览器从正常模式调整到切换模式时，resetMenu() 函数正在处理以保留特定分辨率的 CSS，这样做是一个好习惯吗？
$(document).ready(function($) {
function resetMenu() {
$('#top-menu li, #search-form, .social').css({"display":"block"});
$('#top-menu li').css({"display":"inline-block"});
};
$(window).resize(function () {
if($(window).width() > 640){
$(resetMenu());
}
else{
$('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000);
$('#top-menu li:nth-child(2)').css({"display":"none"});
}
});
$(".togglebutton").toggle(
function () {
if($(window).height() < 360){
$('#top-menu li').css({"display":"inline-block"}).fadeIn(500);
$('#top-menu li:nth-child(2)').css({"display":"none"});
$('#search-form, .social').css({"display":"block"}).fadeIn(500);
$('#top-menu li').css({"border":"none"});
}
else{
$('#top-menu li, #search-form, .social').css({"display":"block"}).fadeIn(1000);
$('#top-menu li:nth-child(2)').css({"display":"none"});
}
},
function () {
$('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000);
$('#top-menu li:nth-child(2)').css({"display":"none"});
}
)});
最佳答案
我通常更喜欢在不同模块上具有声明和执行部分的代码，因此，其中一部分是:
var one = $('#top-menu li')
var two = $('#top-menu li, #search-form, .social');
var three = $('#top-menu li:nth-child(2)');
var four = $('#search-form, .social')
function toggleIn() {
if($(window).height() < 360){
one.css({"display":"inline-block"}).fadeIn(500);
three.css({"display":"none"});
four.css({"display":"block"}).fadeIn(500);
one.css({"border":"none"});
}
else{
two.css({"display":"block"}).fadeIn(1000);
three.css({"display":"none"});
}
},
function toggleOut() {
two.css({"display":"none"}).fadeOut(1000);
three.css({"display":"none"});
}
function resetMenu() {
one.css({"display":"block"});
two.css({"display":"inline-block"});
};
而另一个只是:
$(window).resize(function () {
if($(window).width() > 640){
$(resetMenu());
}
else{
two.css({"display":"none"}).fadeOut(1000);
three.css({"display":"none"});
}
});
$(".togglebutton").toggle(toggleIn, toggleOut);
那么，在我看来，第二部分将是您的“简约”代码。并且代码的每个功能部分都可以单独评估，对于调试目的很有用。
关于javascript - 我可以使用哪些 jQuery/JavaScript 速记或实践来使此代码更简约？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14300170/