JQuery列表下拉菜單問題

是的，這是其中一個問題，我也看到了關於SO的其他類似問題，但無法解決所有可用建議的問題。我是Javascript新手。JQuery列表下拉菜單問題

我創建了一個小字體列表，我可以點擊它來動態更改我的頁面上的字體。這裏是HTML：

<div id='L3_RIGHT'> 
    <ul id="ffonts"><li>Font Selection:</li></ul> 
</div>

在文檔就緒，我爲每個字體添加<li>條目。當我點擊任何字體名稱時，頁面已成功更新。

我想將該列表轉換爲下拉列表，以減少頁面上的空間。我認爲以下將幫助：

$("#ffonts li").hover(
    function(){$(this).find("ul").slideDown(200);}, 
    function(){$(this).find("ul").slideUp(400);});

但它沒有。它不會產生下拉效果（是的，在創建<li>條目之後，它在文檔就緒狀態下調用）。我嘗試過在網絡上的這個和那裏提出的變化和想法，但沒有成功。

我該如何繼續？謝謝。

2011-10-18 JVerstry

你能指出一個你想要完成的事情的例子嗎？通常一個下拉列表是帶有'option'標籤的'select'。但是，這不是你在這裏做的 - 我故意假設。 – evan

@evan好點。我沒有考慮選擇...我會嘗試... – JVerstry

@evan我終於用選擇解決了我的問題。如果您創建解決方案，我會批准它。 – JVerstry

你的懸停函數使用'li'元素作爲'this'，'find'只能找到DOM中更深的元素。由於'ul'在dom中較高，因此如果您知道'li'是所有情況下的直接後代，那麼您可以執行$（this）.parents（'ul'）（或'.parent（）'），然後您的幻燈片功能應該在正確的元素上工作。

我擴大了您的例子一點點的位置：http://jsfiddle.net/fEdpA/1/

你可能不希望「字體選擇：」你的「禮」元素的內部，因爲當UL向上滑動時它會消失，這就是你的字體去。在我的例子中，我只是爲你創建一個標籤並獲得父項，然後你可以用'find'查找並獲得'ul'。

2011-10-18 00:39:26 MichaelSmith

您建議的代碼確實可以成功創建下拉效果，但是當我將鼠標移到菜單項上時，它會在我有機會選擇一個項目之前關閉。 – JVerstry

哈哈對不起，如果你只是瞄準整個div，並讓CSS具有div顯示：inline-block，它將保持開放，同時徘徊在div內的任何東西。我更新了jsfiddle鏈接 – MichaelSmith

通常情況下，下拉列表是一個select與option標籤。很高興我的評論爲你工作！

作爲可能會看到這個問題/答案的其他人的一個說明，通常最好不要重新提出常見的輸入。有很多工具可以幫助有可訪問性問題的人們。他們已經知道內置輸入是什麼以及如何處理它們。他們很少能夠弄清楚當你讓所有的習慣和時髦時你正在嘗試做什麼。

2011-10-21 03:31:07 evan

回答