如何使用.slideToggle更具體？

可怕的標題，但我有麻煩命名我的問題。如何使用.slideToggle更具體？

我試圖做幾個盒子，只需點擊一下按鈕，將會顯示一堆信息。我的問題是，每個盒子都應該有自己的按鈕，因爲它現在編碼，只有其中一個描述擴大和崩潰，不管我點擊什麼按鈕。

我寫了下面的jQuery代碼：

$(document).ready(function() { 
    $('#sponsor-description').hide(); 

    $('#sponsor .expand').click(function() { 
     $('#sponsor-description').slideToggle('slow'); 
    }); 
});

您可以在網站上嘗試自己出來（點擊橙色的「展開」按鈕上）：http://dacc.fredrixdesign.com/sponsors/。

我該怎麼做，以便當我點擊其中一個「展開」按鈕時，相應的說明會滑下來？我想$(this)可能會有所幫助，但我不確定。謝謝！

來源

2013-03-06 Frederick Andersen

你可以做一個jsfiddle嗎？ – Sam 2013-03-06 22:43:27

'#sponsor .expand'與'＃sponsor-description'有什麼關係？用你現在有的東西，我猜你使用的是重複的ID（如果你不知道，這很糟糕） – 2013-03-06 22:46:55

@KevinB我想通過WordPress自動生成它。目前每條線都是帖子，所以如果我爲課程分配一個唯一的ID，我不確定將來如何增加贊助商的數量。你有提議嗎？ – 2013-03-06 22:52:17

＃sponsor-description是一個id。你真的在濫用身份證。它們必須對每個元素都是唯一的。我建議使用獨特的ID或使用更好的選擇器的CSS類。

現在，您正在使用sponsor-description作爲每個描述元素的id，這就是爲什麼代碼失敗的原因。

我不知道WordPress的，但如果你可以改變所有這些id屬性是類，你將是金。假設你可以改變他們你的代碼將是：

$('.sponsor .expand').click(function() { 
    $(this).parents('.sponsor').children('.sponsor-description').slideToggle('slow'); 
});

來源

2013-03-06 22:46:20

它應該是自動的。每一行都是通過WordPress撰寫的文章。 – 2013-03-06 22:47:54

我現在已將其中大部分改爲類，但是如果我要爲每個後課程創建唯一的ID，則無論何時發佈新的發起人帖子，我都無法看到它會如何保持自動。 – 2013-03-06 22:53:48

對不起，我更新了我的答案。我只是在你的網站上運行代碼，它似乎工作。 – 2013-03-06 23:05:42

如何使用.slideToggle更具體？

回答

相關問題