fadeout和fadeIn下拉列表 - jQuery

我正在一個項目上工作，我有多個下拉菜單，這些下拉菜單使用PHP填充。每個下拉列表的ID爲styleDrop，容器ID爲styleCont。現在，出於某種原因，在第一個下拉列表，那就是似乎與我的代碼進行「註冊」的只有一個：fadeout和fadeIn下拉列表 - jQuery

//this file is used for the styling dropdowns 
$(document).ready(function() { 
    //close opened dropdown and open one selected: 
    $("#styleDrop").click(function(){ 
     var selected = $(this); 
     $("#styleCont").fadeOut(); 
     selected.closest("#styleCont").fadeIn(); 
    }); 

});

什麼是假設發生：

用戶會點擊一個下拉和如果任何其他下拉列表打開，它將關閉，而剛選擇的用戶打開。另外，如果他們點擊下拉菜單之外，它將關閉。

問題是這不適用於其他任何下拉菜單以及與之配合使用的菜單，它只是使其立即打開並關閉。

我不確定這是爲什麼。思考？想法？

來源

2013-07-18 David Biga

ID應該是唯一的。

您的選擇器正在查找第一個（通過調用getElementById）並返回它。

使用類代替，並適當地改變你的選擇使用「.styleCont」

<select class="styleDrop" ... >

然後......

$(".styleDrop")

來源

2013-07-18 00:49:14 Matt

嗯，忘了這一點，偶然是他們通過使用ID解決這個問題？ –

這不是正確的方法 - 但你可以使用getElementsByTagName（「select」）或$（「select」），循環遍歷它們並檢查這個id的presensce，然後綁定你的點擊監聽器 – Matt

聽起來像很多工作？ –

每個下拉列表中給出styleDrop
的ID

這就是爲什麼，頁面上的每個元素都必須是唯一的，所以你的函數y綁定到它在DOM中找到的第一個。改爲使用班級（即.styleDrop）。

來源

2013-07-18 00:49:39 msanford

fadeout和fadeIn下拉列表 - jQuery

回答

相關問題