無法選擇課後改變

/* ========== 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')。任何人都可以幫助我嗎？無法選擇課後改變

來源

2012-02-20 kapantzak

嘗試綁定一個「活」事件。（'click'，function（e）{}）;''（'div.expanded'）。live ）;'。 – 2012-02-20 19:13:03

您的問題您正在使用附加事件處理程序的舊方法，這些處理程序依賴於處理程序設置時存在的元素。將.click（）更改爲.on（'click'），它將解決問題。

jQuery on

來源

2012-02-20 19:14:13 jbabey

只需將'click'改爲'.on（'click'）'並不能解決問題。兩者都是相同的。 – 2012-02-20 19:19:15

@FelixKling你怎麼看？處理程序綁定時，類'最小化'的元素不存在。使用此修復。 – jbabey 2012-02-20 19:21:32

不，它不。正如我所說的，'.click（）'和'.on（'click'）'都是完全一樣的東西。如果你想使用'.on'來進行事件委託，你必須傳遞第三個參數，一個選擇器。 – 2012-02-20 19:23:09

當您嘗試將事件處理程序綁定到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呢，所以不受該選擇匹配。

來源

2012-02-20 19:12:41

+1。 Minor nitpick：'$（document.body）'中的'document.body'不是一個_selector_，而是一個DOM元素。 – 2012-02-21 10:51:18

@Mathias：對，我想把它作爲一個更加通用的術語來指代選定的元素，但我現在用不同的表述來避免混淆。謝謝！ – 2012-02-21 10:54:11

處理程序在執行您所提供的代碼時被綁定。您需要綁定一個點擊處理程序並檢查元素狀態（例如expanded類的存在）以選擇與上述兩個處理程序對應的兩個分支中的一個（一個用於展開，一個用於摺疊）。

來源

2012-02-20 19:14:13

嘗試使用toggle()方法。

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

來源

2012-02-20 19:18:12 Dave

+1這可能是最簡單/最好的方法。 – 2012-02-20 19:22:25

非常感謝！ – kapantzak 2012-02-20 20:00:47

@ user1221792：如果它對你有幫助，應該點擊旁邊的勾號框來接受這個答案。 – 2012-02-20 20:09:57

無法選擇課後改變

回答

相關問題