更有效地编写我的jQuery

Writing my jQuery more efficently

本文关键字：我的 jQuery 有效地      更新时间：2023-09-26

我有两个类似的功能，通过页面上的句柄执行响应菜单切换，请参阅代码：

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

 $(function() {
effectdemo("#pull",'.main-nav ul');
effectdemo('#toggle-handle','.blog-sidebar-wrap');
    });
function effectdemo(starter,sliderconatiner)
{
         var toggle        = $(starter);
            sidebar        = $(sliderconatiner);
            sidebarHeight  = sidebar.height();
        $(toggle).on('click', function(e) {
            e.preventDefault();
            sidebar.slideToggle('fast');
        });
}
相关文章：