JQuery列表下拉菜单问题

Question

是的，这是其中一个问题，我在SO上看到了其他类似的问题，但无法用所有可用的建议解决我的问题。我是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）.parents（'ul'）（或'.parent（）'，如果你知道'li'是所有情况下的直系后代）然后你的slide函数应该正确处理元素。

我在这里稍微扩展了你的例子：http://jsfiddle.net/fEdpA/1/

你可能不希望'li'元素内部出现'字体选择：'，因为它会在ul滑动时消失，这就是你的字体所在的位置。在我的示例中，我只是为您创建一个标签并获取父级，然后您可以使用'find'查看并获取'ul'。

Answer 2

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

作为其他人可能会看到这个问题/答案的说明，通常最好不要重新发明共同的投入。有很多工具可以帮助那些有可访问性问题的人。他们已经知道内置输入是什么以及如何处理它们。

，当你把它变成所有自定义和时髦的时候，它们很难弄清楚你想要做什么。