我有两个类似的功能,可通过页面上的手柄执行响应菜单切换,请参见代码:
//responsive main navigation
$(function() {
var pull = $('#pull');
menu = $('.main-nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle('fast');
});
});
//responsive blog navigation
$(function() {
var toggle = $('#toggle-handle');
sidebar = $('.blog-sidebar-wrap');
sidebarHeight = sidebar.height();
$(toggle).on('click', function(e) {
e.preventDefault();
sidebar.slideToggle('fast');
});
});
我的问题是我该怎么写,这样才不会重复相同的过程(函数)。我是否要设置一个功能并传递参数?帮助大为赞赏,这里是jQuery / Javascript初学者!
最佳答案
尝试
//a function that creates a slide based menu
function slideMenu(ctrl, target){
ctrl.on('click', function(e) {
e.preventDefault();
target.slideToggle('fast');
});
}
//responsive main navigation
$(function() {
var pull = $('#pull');
menu = $('.main-nav ul');
menuHeight = menu.height();
slideMenu(pull, menu)
});
//responsive blog navigation
$(function() {
var toggle = $('#toggle-handle');
sidebar = $('.blog-sidebar-wrap');
sidebarHeight = sidebar.height();
slideMenu(toggle, sidebar)
});