Javascript 代码重构JQuery

我的菜单系统有这个代码。它工作得很好。这是一个jQuery滑动菜单（类似于youtube的滑动菜单）

我想知道是否还有其他更好的方法来编写jQuery代码以实现相同的结果（代码重构）

---

这最好放在@Barmar中，将其作为离题关闭，因为它在这里离题。它是否出现在其他网站（如Code Review）的主题上并不重要。这只是一个建议。如果你愿意的话，你没有理由不在投票结束时提供一个有用的评论（包括在哪里问它更好）。关于重构的一般主题——何时、为什么、如何--

var main = function() {

    if(!$('.menu li span').hasClass('closed')){
        $(".menu li").find('span').addClass('closed');
        $('.menu li').mouseenter(function() {
            $(this).find('.closed').show();
          })
         $('.menu li ').mouseleave(function() {
           $(this).find('.closed').hide();
          });
    } 

    $(".icon-menu").click(function() {
        event.stopPropagation();

    if($("body").hasClass("opened")){
        $(".menu").animate({
            width: "59px"
        }, 300);
        $("body").removeClass('opened');
        $(".menu li").find('span').addClass('closed');
        $('.menu li').find('span').fadeOut(300);    

    }else{
        $(".menu").animate({
            width: "193px"
        }, 300);
            $("body").addClass('opened');
            $(".menu li").find('span').removeClass('closed');
            $('.menu li span').show();
        }

    });

    $('html').click(function() {
        //Hide the menus if visible
        if($("body").hasClass("opened")){
            $(".menu").animate({
                width: "59px"
            }, 300);
            $("body").removeClass('opened');
            $(".menu li").find('span').addClass('closed');
            $('.menu li').find('span').fadeOut(300);    
        } 
    });


}; 
 $(document).ready(main);