javascript - 更高效地编写 jQuery

Question

我有两个类似的函数通过页面上的 handle 执行响应式菜单切换，请参阅代码:

//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 初学者，这里的帮助非常感谢!

Answer 1

尝试

//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)
});