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>条目之后，它在文档就绪状态下调用）。我尝试过在网络上的这个和那里提出的变化和想法，但没有成功。

我该如何继续？谢谢。

你能指出一个你想要完成的事情的例子吗？通常一个下拉列表是带有'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'。

您建议的代码确实可以成功创建下拉效果，但是当我将鼠标移到菜单项上时，它会在我有机会选择一个项目之前关闭。 – JVerstry

哈哈对不起，如果你只是瞄准整个div，并让CSS具有div显示：inline-block，它将保持开放，同时徘徊在div内的任何东西。我更新了jsfiddle链接 – MichaelSmith

答

通常情况下，下拉列表是一个select与option标签。很高兴我的评论为你工作！

作为可能会看到这个问题/答案的其他人的一个说明，通常最好不要重新提出常见的输入。有很多工具可以帮助有可访问性问题的人们。他们已经知道内置输入是什么以及如何处理它们。他们很少能够弄清楚当你让所有的习惯和时髦时你正在尝试做什么。