我有两个类似的功能,可通过页面上的手柄执行响应菜单切换,请参见代码:

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

10-07 19:24
查看更多