Javascript Shopify：编辑一个大菜单，点击打开/关闭，而不是悬停？

我正在尝试编辑我的Shopify主题。我想通过单击而不是悬停来打开/关闭mega菜单。我自学了编写HTML和CSS代码，并且刚刚开始探索javascript/JQuery。我还在学习。无论如何，我希望这将是一个简单的解决办法 按以下方式处理单击以打开和关闭下拉列表

    $(this).parent().toggleClass('open');
});

然后聆听下拉列表外部的单击，将其关闭，如下所示：

$('body').on('click', function (e) {
    if (!$('li.navigation__item').is(e.target) 
        && $('li.navigation__item').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.navigation__item').removeClass('open');
    }
});

---

谢谢你的回复。我不太明白。而且，我仍然不清楚如何将这个建议集成到我的代码中。我感谢你的帮助。