El menú de la clase jQuery no se muestra correctamente

He escrito el siguiente jQuery simple para mostrar un submenú. Cuando hago clic en el enlace para abrir el menú, el menú se abre y anima correctamente, y agrega la nueva clase a los enlaces. Sin embargo, cuando hago clic en el enlace recién clasificado para cerrar el submenú, no sucede nada. Esto no tiene sentido para mí, ¿alguien puede decirme qué estoy haciendo mal?

Muchas gracias por cualquier ayuda, aquí está mi código:

// 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

preguntado el 29 de septiembre de 13 a las 22:09

1 Respuestas

El DOM está actualizado. Necesita usar un detector de eventos "persistente", como:

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

Respondido el 29 de Septiembre de 13 a las 22:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.