Невозможно выбрать после изменения класса

Question

/* ========== Expand Left Menu ========== */
    $('div.minimized').click(function() {
        $(this).removeClass("minimized");
        $(this).addClass("expanded");
        $('a.main_nav').removeClass("min");
        $('a.main_nav').addClass("exp");
        $('#left_menu_ul li a').animate({"margin-left" : "-20px"}, 400, 'easeOutExpo');
        $('#expand_wrapper').animate({"width" : "270px"}, 400, 'easeOutExpo');
        $('#expand').animate({"left" : "227px"}, 400, 'easeOutExpo');
        $('#left_menu').animate({"width" : "270px"}, 400, 'easeOutExpo');
    });

    /* ========== Minimize Left Menu ========== */      
    $('div.expanded').click(function() {            
        $(this).removeClass("expanded");
        $(this).addClass("minimized");
        $('a.main_nav').removeClass("exp");
        $('a.main_nav').addClass("min");
        $('#expand_wrapper').removeAttr('style');
        $('#left_menu_ul li a').animate({"margin-left" : "-223px"}, 800, 'easeInExpo');
        $('#expand_wrapper').animate({"width" : "67px"}, 800, 'easeInExpo');
        $('#expand').animate({"left" : "26px"}, 800, 'easeInExpo');
        $('#left_menu').animate({"width" : "67px"}, 800, 'easeInExpo');
    });

Я новичок в jQuery, и у меня есть проблема, которую я не могу решить: я хочу развернуть вертикальное меню.Код, расширяющий меню, работает нормально, но после того, как меню развернуто (классы меняются), jQuery не может выбрать $('div.expanded').Кто-нибудь может мне помочь?

Answer 1

В то время, когда вы пытаетесь связать обработчик событий с div.expanded, элемент еще не существует ^*. Следовательно, jQuery не может найти его и связать обработчик.

Вы можете решить эту проблему, используя делегирование события :

$(document.body).on('click', 'div.minimized', function() {
   //...
});

$(document.body).on('click', 'div.expanded', function() {
   //...
});

Вместо привязки события к каждому элементу, который соответствует селектору, обработчик привязывается к выбранным элементам ($(document.body)) и запускается всякий раз, когда происходит событие на потомке, который соответствует селектору (div.expanded). Вы должны выбрать первый селектор как можно ближе к фактическим элементам, для которых вы хотите запустить событие.

Дополнительную информацию также можно найти в документации jQuery в разделе Прямые и делегированные события .

---

*: Точнее говоря, элемент на самом деле существует, но у него еще нет класса expanded, поэтому этот селектор ему не соответствует.

Answer 2

Попробуйте использовать метод toggle () .

$("div.expandable").toggle(function() { 
    // expand
}, function() {
    // minimize
});

Answer 3

Ваша проблема в том, что вы используете старый способ присоединения обработчиков событий, который основывается на элементе, существующем при настройке обработчика. Измените ваш .click () на .on ('click'), и это решит проблему.

JQuery на

Answer 4

Обработчики связаны во время выполнения кода, который вы дали.Вам необходимо привязать один обработчик щелчка и проверить состояние элемента (например, наличие класса expanded), чтобы выбрать одну из двух ветвей, соответствующих двум указанным выше обработчикам (одну развернуть, другую свернуть).