我正在构建一个固定在顶部的响应式导航栏。
我让它工作,所以如果你点击菜单图标,导航会使用 jQuery 的 .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;
}
});
});
您可以在此处查看演示。
然而,问题是这样的:菜单按钮按原样切换滑动,但单击菜单项只会向上滑动菜单一次。之后,菜单按钮仍然有效,但通过单击菜单项滑动不起作用。
提前感谢所有帮助。
我稍微改变了你的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');
});
});
链接到小提琴