Javascript 菜单赢了'；一旦用户转到新页面，请不要滑回

我正在创建一个具有自定义响应菜单的web应用程序。这只是你基本的三个列表项菜单下拉列表。当用户点击“汉堡包”图标时，它会向下滑动。当他们点击“X”时，它会向上滑动

问题在于，当用户在移动菜单的关闭状态下单击“汉堡包”图标，然后单击移动菜单外页面上的另一个链接时，菜单将保持打开/向下滑动状态，除非用户重新加载页面，否则菜单将不可用

我需要在JS函数或CSS中添加什么来防止这种行为？我感谢你的帮助

守则： HTML:

Javascript:

$(function responsiveHomeMenu(){
// Store content nodes in DOM
var $menuIcon = $('.home-header-content__nav--mobile-menu .fa');
var $menuList = $('.home-header-content__nav--mobile-menu ul');

// Hide menu links by default
$menuList.hide();

// Toggle menu with icon
$menuIcon.on("click", function(e){
    $menuIcon.toggle();
    $menuList.slideToggle(300);
    $(document).off("click",function(){
        $menuList.toggle();
    })
});
});

---

试试这个

    // Toggle menu with icon
menuIcon.on("click", function(e){
    menuIcon.slideToggle();
    menuList.slideToggle(300);

});
$(document).on("click",function(){
        menuList.slideUp();
    });
});

---

是否希望在单击页面上的其他内容时隐藏菜单？或者您希望它保持打开状态并保持可点击状态？我会尝试移动变量并

$menuList.hide（）在函数外部。它应该隐藏
$（document）上的菜单。准备好了吗？
@A\u funs我希望它在单击其他内容后滑回。我还希望它再次隐藏一旦一个新的页面已经加载。我对后者有意见。每次我点击菜单图标滑下移动菜单，然后转到一个新页面（无需再次点击以关闭它），该菜单在新页面上保持滑下状态，并且变得无用（无法点击它以滑回）。甚至当我在进入新页面之前单击它向上滑动时，它也会这样做。@Nordenheim我确实采纳了你的建议，但不幸的是，实现了这一点，但没有成功。在我进入新页面后，它仍然没有重置。我确实采纳了你的建议，并且不幸地实现了这一点，但没有成功。在我转到新页面后，它仍然不会重置。
$(function responsiveHomeMenu(){
// Store content nodes in DOM
var $menuIcon = $('.home-header-content__nav--mobile-menu .fa');
var $menuList = $('.home-header-content__nav--mobile-menu ul');

// Hide menu links by default
$menuList.hide();

// Toggle menu with icon
$menuIcon.on("click", function(e){
    $menuIcon.toggle();
    $menuList.slideToggle(300);
    $(document).off("click",function(){
        $menuList.toggle();
    })
});
});

    // Toggle menu with icon
menuIcon.on("click", function(e){
    menuIcon.slideToggle();
    menuList.slideToggle(300);

});
$(document).on("click",function(){
        menuList.slideUp();
    });
});