JQueryリストのドロップダウンメニューの問題

Question

はい、それはこれらの質問の1つですが、他の同様の質問がありましたが、使用可能なすべての推奨事項で問題を解決できませんでした。私はJavascriptを初めて使っています。

私はクリックしてページ上のフォントを動的に変更することができる小さなフォントリストを作成しました。ここでは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>のエントリが作成された後、ドキュメント・レディで呼び出されます）。私はこれとそのアイデアのバリエーションを試してみましたが、ここではネット上で提案されましたが、成功はありません。

どうすればよいですか？ありがとう。

Answer 1

あなたのホバー関数は 'li'要素を 'this'として使用し、 'find'はdom内のより深い要素のみを検出します。 'ul'がdomのほうが高いので、$（this）parent（ 'ul'）（または 'li'がすべての場合に直接の子孫であることがわかっている場合は '.parent（）'）、次にスライド機能が正しい要素に作用しているはずです。

私はここにあなたの例に少し拡大：http://jsfiddle.net/fEdpA/1/

をあなたはおそらく「フォント選択：」をしたくないあなたの「李」要素の内部をULはアップスライドするとき、それは消えますので、どこそれはですフォントは移動します。私の例では、あなたのためのラベルを作成して親を取得するだけです。そして、あなたは 'find'で内部を見ることができ、 'ul'を得ることができます。

Answer 2

通常、ドロップダウンリストはselectで、optionタグです。喜んで私のコメントはあなたのために働いた！

一般的な入力を再作成するのではなく、この質問/回答が表示される場合があります。アクセシビリティの問題を抱えている人々を助けるためのツールがたくさんあります。彼らはすでに組み込みの入力が何であり、どのように扱うべきかを知っています。彼らは、あなたがそれをすべて習慣的かつ魅力的にするときに何をしようとしているのかを決めることはめったにありません。