Jquery菜单如何在单击外部元素时切换类

Question

我有这个菜单，但是当我单击不同的元素时，我不知道如何删除单个元素上的'show'类？前 2 个函数用于在屏幕宽度超过 739 时悬停。但是对于响应式部分，当我单击不同的元素时如何关闭元素？

$(document).ready(function () {
    if ($(window).width() > 739) {
        $('#mainmenu li').hover(
            function () {
                //mostra sottomenu
                $('ul', this).stop(true, true).delay(50).slideDown(100);
            },
            function () {
                //nascondi sottomenu
                $('ul', this).stop(true, true).slideUp(200);
            });
    }
    else {
        $('#mainmenu li.drop1').click(
            function (event) {
                event.stopPropagation();
                //mostra sottomenu
                $('#myDropdown').toggleClass("show");
            }
        );
        $('#mainmenu li.drop2').click(
            function (event) {
                event.stopPropagation();
                //mostra sottomenu
                $('#myDropdown2').toggleClass("show");
            }
        );
        $('#mainmenu li.drop3').click(
            function (event) {
                event.stopPropagation();
                //mostra sottomenu
                $('#myDropdown3').toggleClass("show");
            }
        );
        $('#mainmenu li.drop4').click(
            function (event) {
                event.stopPropagation();
                //mostra sottomenu
                $('#myDropdown4').toggleClass("show");
            }
        );
    };
});

Answer 1

我用这段代码解决，虽然现在我再次单击它时无法关闭元素^^

else {
    $(".drop").on("click", function (e) {
        e.stopPropagation();
        $("#myDropdown:visible", $(this).siblings()).slideUp("fast");
        $("#myDropdown:visible", $(this)).slideUp();
        $("#myDropdown", this).slideDown();

    });
    $(document).on("click", function(){
$(".drop #myDropdown").slideUp();
});