javascript - jQuery 类菜单无法正确显示

Question

我编写了以下简单的 jQuery 来显示子菜单。当我单击链接打开菜单时，菜单会打开并正确设置动画，并将新类添加到链接中。但是，当我单击新分类的链接以关闭子菜单时，什么也没有发生。这对我来说毫无意义，谁能告诉我我做错了什么？

非常感谢您的帮助，这是我的代码：

// DOM ready
$(document).ready(function () {

    // Options menu functionality
    $('a.menu-closed').click(function () {
        $('.left-menu a').removeClass('menu-closed');
        $('.left-menu a').addClass('menu-open');
        $('.options').animate({width: '20%'}, 200);
        $('.main-content').animate({width: '60%'}, 200);
    });
    $('a.menu-open').click(function () {
        $('.left-menu a').removeClass('menu-open');
        $('.left-menu a').addClass('menu-closed');
        $('.options').animate({width: '0%'}, 200);
        $('.main-content').animate({width: '80%'}, 200);
    });

});// /DOM ready

Answer 1

DOM 已更新。您需要使用“持久”事件侦听器，例如：

$(document).on('click', 'a.menu-closed', function () {
  $('.left-menu a').removeClass('menu-closed');
  $('.left-menu a').addClass('menu-open');
  $('.options').animate({width: '20%'}, 200);
  $('.main-content').animate({width: '60%'}, 200);
});

$(document).on('click', 'a.menu-open', function () {
  $('.left-menu a').removeClass('menu-open');
  $('.left-menu a').addClass('menu-closed');
  $('.options').animate({width: '0%'}, 200);
  $('.main-content').animate({width: '80%'}, 200);
});