如何将 mouseenter/mouseleave 菜单代码更改为 javascript 的 onclick 菜单？答案

【问题标题】：How do I change a mouseenter/mouseleave menu code to onclick menu for javascript?如何将 mouseenter/mouseleave 菜单代码更改为 javascript 的 onclick 菜单？
【发布时间】：2013-02-08 23:27:24
【问题描述】：

我是 javascript 的新手，我正在尝试制作一个 onclick 下拉菜单。我希望它看起来像这样： http://www.instantshift.com/demo/dropdown_menu/ 但这是 mouseenter/mouseleave（换句话说，悬停），而我希望它是 onclick。如何更改此代码以使其成为 onclick？也可以请你给我onclick的jquery吗？

我当前的悬停代码（mouseenter/mouseleave 菜单）如下：

$(function(){
$('.dropdown').mouseenter(function(){
    $('.sublinks').stop(false, true).hide();

    var submenu = $(this).parent().next();

    submenu.css({
        position:'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex:1000
    });

    submenu.stop().slideDown(300);

    submenu.mouseleave(function(){
        $(this).slideUp(300);
    });
});
});
</script>

再次，我想将其更改为 onclick。

谢谢。

【问题讨论】：

这是一个帮助您入门的参考点：.click()

标签： javascript jquery menu onclick hover

【解决方案1】：

我认为你可以通过点击触发菜单，然后任何其他点击都会关闭它。

所以，简单的修改：

$(function() {
    $('.dropdown').click(function() {
        $('.sublinks').stop(false, true).hide();

        var submenu = $(this).parent().next();

        submenu.css({
            position: 'absolute',
            top: $(this).offset().top + $(this).height() + 'px',
            left: $(this).offset().left + 'px',
            zIndex: 1000
        });

        submenu.stop().slideDown(300);

       //click anywhere outside the menu
       $(document).click(function() {
            var $el = $(this);
            $el.not('.dropdown') && $el.slideUp(300);
        });
    });
});

【讨论】：

下拉菜单完美运行；但是，当我在菜单外单击时，它无法恢复。你能就这件事回复我吗？谢谢！

【解决方案2】：

替换

$('.dropdown').mouseenter(function(){

与

$('.dropdown').click(function(){

【讨论】：