Question

我正在构建一个固定在顶部的响应式导航栏我得到了它的工作，所以如果你点击菜单图标导航使用jQuery＆＃39; s .slideDown()上下滑动。当您单击下拉导航中的菜单项时，也会向上滑动。

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

您可以在此处看到Demo。

然而问题是这样：菜单按钮切换滑动，但单击菜单项只会将菜单向上滑动一次。之后，菜单按钮仍然有效，但滑动通过单击菜单项不会。

提前感谢您的所有帮助。

Answer 1

我改变了你的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');    
  });

});

Link to fiddle

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

1 个答案: