JQuery列表下拉菜单问题

JQuery list drop down menu issue

本文关键字：问题 下拉菜单 列表 JQuery      更新时间：2023-09-26

是的，这是其中一个问题，我在SO上看到过其他类似的问题，但无法用所有可用的建议解决我的问题。I am new to 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中被调用)。我尝试了各种各样的方法和网上的建议，但都没有成功。

我该怎么做?谢谢。

你的hover函数使用'li'元素作为'this'，而'find'只查找dom中更深的元素。因为'ul'在dom中的位置更高，你可以使用$(this).parents('ul')(或者'.parent()'，如果你知道'li'在所有情况下都是直接的后代)，然后你的幻灯片函数应该在正确的元素上工作。

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

你可能不希望'Font Selection:'在你的'li'元素里面，因为它会在ul滑上去的时候消失，那是你的字体所在。在我的例子中，我只是为你创建了一个标签并获得父标签，然后你可以使用'find'查看并获得'ul'。

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

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

相关文章：