JQuery列表下拉菜单问题

Question

是的，这是其中一个问题，我在SO上看到了其他类似的问题，但无法用所有可用的建议来解决我的问题。我是Javascript的新手。

我已经创建了一个小字体列表，我可以单击它来动态更改页面上的字体。下面是HTML：

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

在document-ready中，我为每种字体添加<li>条目。当我单击任何字体名称时，页面都会成功更新。

我想将该列表转换为下拉列表，以便在页面上占用较少空间。我认为以下内容会有所帮助：

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

但事实并非如此。它不会产生下拉效果(是的，它是在创建<li>条目后在document-ready中调用的)。我在网上尝试了各种不同的方法和想法，但都没有成功。

我应该如何继续？谢谢。

Answer 1

您的hover函数将'li‘元素用作'this’，而'find‘只查找dom中更深的元素。由于'ul‘在dom中的位置较高，因此您可以执行$(this).parents('ul') (或者'.parent()’，如果您知道'li‘在所有情况下都是直接子元素的话)，然后您的滑动函数应该在正确的元素上工作。

我在这里稍微扩展了一下您的示例：http://jsfiddle.net/fEdpA/1/

你可能不想在你的'li‘元素中使用'Font Selection:’，因为当ul滑到上面时，它就会消失，这就是你的字体所在的地方。在我的示例中，我只需为您创建一个标签并获取父标签，然后您可以使用'find‘查看内部并获取'ul’。

Answer 2

通常，下拉列表是带有option标签的select。很高兴我的评论对你有效！

对于其他可能看到这个问题/答案的人来说，通常最好不要重新发明公共输入。有很多工具可以帮助有可访问性问题的人。他们已经知道内置输入是什么，以及如何处理它们。当你把所有的东西都定制和时髦的时候，他们很少能弄明白你想要做什么。