我试图用OOP Javascript制作菜单以防止可重复的代码。我有两个菜单元素"toggleBtn"用于桌面汉堡图标和"toggleBtnMobile"用于移动布鲁格图标。
现在的问题是:它不起作用。
var $this = $(this),
$navSidebar = $('#navSidebar'),
$navDlrz = $('#navDlrz'),
$toggleBtn = $('#toggleBtn'),
$toggleBtnMobile = $('#toggleBtnMobile'),
$menuHasChildren = $('.menu-item-has-children'),
$subMenu = $menuHasChildren.find('ul.sub-menu');
// Menu class
function Menu(menu) {
this.menu = menu;
var one = menu.children().eq(1); // Burger Icons top bar
var two = menu.children().eq(2); // Burger Icons middle bar
var three = menu.children().eq(3); // Burger Icons bottom bar
}
// When the Nav is clicked, the burger Icon transforms into "X"
Menu.prototype.openNav = function() {
one.addClass('One');
two.addClass('Two');
three.addClass('Three');
$navSidebar.css('left', '0px');
$navDlrz.css('left', '200px');
};
// Back to standard Icon
Menu.prototype.closeNav = function() {
one.removeClass('One');
two.removeClass('Two');
three.removeClass('Three');
$navSidebar.css('left', '-200px');
$navDlrz.css('left', '0px');
}
Menu.prototype.toggleNav = function() {
menu.click(function() {
var $this = $(this),
$className = $this.attr('class');
switch($className) {
case 'navbar-toggle':
$this.addClass('open');
this.openNav();
break;
case 'navbar-toggle open':
$this.removeClass('open');
$menuHasChildren.removeClass('open');
$menuHasChildren.find('ul.sub-menu').removeClass('open');
this.closeNav();
break;
}
});
}
重要通知:我不需要任何关于菜单切换的框架。我现在正在学习。
你的问题是关闭
function Menu(menu) {
this.menu = menu;
var one = menu.children().eq(1); // Burger Icons top bar
var two = menu.children().eq(2); // Burger Icons middle bar
var three = menu.children().eq(3); // Burger Icons bottom bar
}
在这里,您使用 var 键声明了一个、两个和三个变量。 这些变量只能在 Menu 构造函数中看到,用 'this' 关键字声明它们,并将它们与 'this' 一起使用