JQuery和顯示/隱藏內容

爲什麼這不起作用？我在網上查找教程，但他們只顯示如何顯示/隱藏按鈕。我想切換元素的高度。JQuery和顯示/隱藏內容

$('.oldestinititives').mousedown(function() { 
    $(this).animate({"height": 450}, "slow"); 
    $(this).addClass("pop"); 
}); 
$('.pop').mousedown(function() { 
    $(this).animate({"height": 250}, "slow"); 
    $(this).removeClass("pop"); 
});

在CSS中，塊默認爲250像素。點擊元素確實會顯示內容，但再次點擊不會隱藏它。使用螢火蟲我可以看到班級'流行'被添加，但它似乎沒有針對它。到底是怎麼回事？

感謝，埃文

來源

2011-09-28 Evan Harrison

在Firebug錯誤控制檯中，您是否收到任何錯誤？ –

請創建一個http://jsfiddle.net/演示。 –

這裏是JSfiddle演示：http://jsfiddle.net/WF6R4/ –

試試這個（工作示例 http://jsfiddle.net/saelfaer/CyD2g/）

$('.oldestinititives').live("click", function() { 
    if($(this).is('.pop')) 
    { 
     $(this).animate({"height": 250}, "slow", function(){ 
      $(this).toggleClass("pop"); 
     }); 
    } 
    else 
    {  
     $(this).animate({"height": 450}, "slow", function(){ 
      $(this).toggleClass("pop"); 
     }); 
    } 
});

我冒昧在一個合併的兩個事件處理程序，因爲他們可能已經合併，這取決於你實際做的功能，你可以使它更短，沒有大的if-else結構...

這裏的想法是，你使用.live("click", function(){});這將綁定事件的任何項目，將永遠是AV alid候選人爲您的選擇。即使在執行代碼時，元素也沒有正確的類名或ID。

來源

2011-09-28 01:36:26 Sander

非常酷！仍然在學習JQuery，所以這段代碼非常有幫助，非常感謝！ –

你可以看到，除了實際的高度變量，if和else子句都是相同的，所以你基本上可以把它放在一個單獨的變量中，並且只使用一次動畫代碼......但這很大程度上取決於你做了什麼在回調後的動畫當然。我做的另一件事是將類切換到回調函數（現在它發生在動畫完成後），它在代碼中位於同一行，所以它會立即發生。 – Sander

當您添加在運行時類，你使用jQuery live()綁定的事件？如果不是，請使用它：

http://api.jquery.com/live/

來源

2011-09-28 01:14:35 kobe

啊好吧，似乎工作。但是現在，盒子在點擊之後立即縮短，就像它同時需要兩次.... hmm –

當時你是掛鉤的鼠標按下事件與pop類的元素，有沒有這個選擇匹配的元素。你必須綁定事件，因爲你添加了這個類的工作。甚至更好：使用delegate或live綁定事件

來源

2011-09-28 01:22:11 madsny

我已經添加了live（），但現在它同時使用了兩個命令，如果這樣做有任何意義的話。請看這裏：http://jsfiddle.net/WF6R4/ –

是的，這是有道理的，因爲你永遠不會從''''''''''''''''''元素中移除事件處理器。 @桑德有一個很好的解決方案。如果你仍然想要處理程序，你可以綁定他們都委託/實時和切換選擇器類即pop/unpop – madsny

JQuery和顯示/隱藏內容

回答

相關問題