Javascript 在菜单项单击或菜单按钮单击时折叠的Jquery响应导航栏

我正在构建一个固定在顶部的响应导航栏。
我让它工作，因此，如果您单击菜单图标，导航将使用jQuery上下滑动。当您单击下拉导航中的菜单项时，也会向上滑动

var toggle = false;

$(document).ready(function () {

    "use strict";

    $("#menu").click(function () {

        if (!toggle) {
            $(".nav-menu").slideDown(function () {
                $(this).toggleClass("nav-expanded").css('display', '');
            });
            toggle = !toggle;
            $("a.menu-link").click(function () {
                $(".nav-menu").slideUp(function () {
                    $(this).toggleClass("nav-expanded").css('display', '');
                });
                toggle = !toggle;
            });
        } else {
            $(".nav-menu").slideUp(function () {
                $(this).toggleClass("nav-expanded").css('display', '');
            });
            toggle = !toggle;
        }
    });
});

你可以在这里看到一个

然而，问题是：菜单按钮按其应有的方式切换滑动，但单击菜单项只能向上滑动菜单一次。在此之后，菜单按钮仍然有效，但通过单击菜单项的滑动功能不起作用

---

提前感谢您的帮助。

我对您的JS做了一点修改：

$(document).ready(function () {

    "use strict";

  $('#menu').click(function(e){
  var navMenu = $(".nav-menu");
    if($(this).hasClass('nav-expanded')){
        navMenu.stop(true,false).slideUp();
    } else {
        navMenu.stop(true,false).slideDown();
    }

    $(this).toggleClass('nav-expanded');

  });

  $(".nav-menu ul li").click(function(e){
    var target = $(e.currentTarget);
    var menu = $('#menu');

    menu.trigger('click');    
  });

});

---

我稍微改变了你的JS：

$(document).ready(function () {

    "use strict";

  $('#menu').click(function(e){
  var navMenu = $(".nav-menu");
    if($(this).hasClass('nav-expanded')){
        navMenu.stop(true,false).slideUp();
    } else {
        navMenu.stop(true,false).slideDown();
    }

    $(this).toggleClass('nav-expanded');

  });

  $(".nav-menu ul li").click(function(e){
    var target = $(e.currentTarget);
    var menu = $('#menu');

    menu.trigger('click');    
  });

});

---

更新的演示非常感谢您！我做这件事的时间比我能承认的要长得多。现在它按预期工作！非常感谢你！我做这件事的时间比我能承认的要长得多。现在它按预期工作！