将此代码缩短为单击菜单

时间:2012-07-17 23:13:02

标签: jquery

感觉这是一个漫长的过程。不要认为函数var是必需的,但很难让它工作,否则,我已经改变了脚本的底部部分做了onmouse leave但总是针对错误的元素。

脚本查找要单击的div然后显示ul并在mouseout上隐藏:

$(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');
    });
});

1 个答案:

答案 0 :(得分: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');
  });
});