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

jQuery类菜单无法正常显示

1 个答案: