jquery - 将此代码缩短为单击菜单

Question

感觉这是一个很长的路要走。不认为函数 var 是必需的，但很难让它工作，否则我已经更改了脚本的底部以执行鼠标离开但总是针对错误的元素。

编写查找要单击的 div 的脚本，然后显示 ul 并在鼠标移出时隐藏：

$(function() {
    var toggleMenu = function(e) {
        var self = $(this),
            elemType = self[0].tagName.toLowerCase(),
            //get caller
            menu = null;
        if (elemType === 'a') {
            //anchor clicked, nav back to containing ul
            menu = self.parents('ul').not('ul#logo_menu');
        } else if (elemType === 'ul') {
            //mouseleft ul, ergo menu is this.
            menu = self;
        }
        if (menu) {
            menu.hide('medium');
        }
        e.preventDefault();
        return false;
    };
     $(document).ready(function() {
        $('div.logo_menu').click(function(e) {
            $('ul#logo_menu ul').show('medium');
            console.log('div clicked');
            e.preventDefault();
            return false;
        });
        $('ul#logo_menu a').click(toggleMenu);
        $('ul#logo_menu ul').mouseleave(toggleMenu);
    });
});

当我瞄准一个。被点击是不是更容易写？

$(document).ready(function() {
     $('a.drop').click(function(e) {
         $(this).next("div").show('slow');
         console.log('div clicked');
         e.preventDefault();
         return false;
     });
    $('li.mainmenudrop').mouseleave(function() {
        $(this).children("div").hide('slow');
    });
});

Answer 1

我认为这是尽可能短的：

$(document).ready(function() {
  $('div.logo_menu').click(function() {
    $('#logo_menu ul').show('medium');
    return false;
  });

  $('#logo_menu a').click(function() {
    $(this).parents('ul').not('#logo_menu').hide('medium');
    return false;
  });

  $('#logo_menu ul').mouseleave(function() {
    $(this).hide('medium');
  });
});