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

我是javascript的新手，我正在尝试制作一个onclick下拉菜单。 我希望它看起来像这样： 但这是mouseenter/mouseleave（换句话说，hover），而我希望它是onclick。如何更改此代码使其成为onclick？ 您还可以为我提供onclick的jquery吗

$(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>

我当前的悬停代码（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>

$（函数（）{
$（'.dropdown'）.mouseenter（函数（）{
$（'.sublinks'）.stop（false，true.hide（）；
var子菜单=$（this.parent（）.next（）；
submenu.css({
位置：'绝对'，
顶部：$（this.offset（）.top++$（this.height（）++'px'，
左：$（this）.offset（）.left+'px'，
zIndex:1000
});
子菜单.stop（）.slideDown（300）；
子菜单.鼠标移动（函数（）{
美元（本）.slideUp（300）；
});
});
});

再一次，我想把这个改成onclick

$(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>

谢谢。

替换

$(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>

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

与

$(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>

---

我认为你只需点击一下就可以触发菜单，然后任何其他点击都会关闭它

$(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>

因此，简单的修改：

$(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>

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

---

这里有一个参考点让你开始：下拉菜单工作得很好；但是，当我在菜单外单击时，无法使其返回。你能给我回个电话吗？非常感谢。