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无法找到它并绑定处理程序。

您可以使用event delegation解决此问题：

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

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

不是将事件绑定到与选择器匹配的每个元素，而是将处理程序绑定到所选元素（$(document.body)），并在与选择器匹配的后代上发生事件时触发（div.expanded ）。您应该选择第一个选择器尽可能接近您想要触发事件的实际元素。

还可以在直接和委派活动下的jQuery's documentation中找到更多信息。

*：更确切地说，元素确实存在，但它还没有类expanded，因此它不与此选择器匹配。

Answer 2

您的问题是您正在使用旧的附加事件处理程序的方式，它依赖于处理程序设置时存在的元素。将.click（）更改为.on（'click'），它将解决问题。

jQuery on

Answer 3

尝试使用toggle()方法。

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

Answer 4

处理程序在执行您给出的代码时受到约束。您需要绑定一个单击处理程序并检查元素状态（例如，expanded类的存在）以选择与上面两个处理程序相对应的两个分支之一（一个扩展，一个折叠。）

课后改变不能选择

4 个答案: