Question

所以，我决定开始更深入地学习CSS，并且我开始尝试实现纯CSS下拉菜单/选择框。我首先研究了一些online tutorials中可用的代码。

最终，I came up with this，我觉得相当不错。但是，我得出的结论是，在所有情况下，CSS菜单可能永远不会成为Javascript菜单的合适替代品，因为当你抛弃Javascript时会出现一些微妙的问题。

如果下拉菜单中的项目只是<a href个链接，那么一切都应该没问题。但是，如果您希望每个链接都触发Javascript事件，则会遇到以下问题：

当用户点击下拉框中的项目时，您需要显然，下拉框到消失。这会自动发生如果下拉框中的项目是<a>元素。如果是的话不是<a>元素，下拉框不会在点击时消失 - 这给你留下了两个选择：（A）连接一些Javascript 听取onclick，然后让下拉框消失，或者（B）使用css :active选择器设置下拉框 display属性none。（A）是愚蠢的，因为你是基本上回到那时的Javascript菜单，而（B）没有解决问题，因为它可以防止Javascript事件在您启动时触发单击菜单中的项目。
因此，使用<a>标记。这意味着如果你想将事件与菜单项选择相关联，您需要使用您的onclick代码中的内联<a>。那很好，除非你这样做这会阻止下拉菜单消失（as demonstrated in my jsfiddle link）。所以，真的，只有CSS 如果您想要做的话，下拉菜单似乎只是可行的用户选择菜单项通过<a>导航到另一个页面链接。我找不到任何方法来获取Javascript函数来解决这个问题没有一些问题。

问题：那么，我说的准确吗？或者有没有办法创建一个仅限CSS的下拉菜单，当用户点击它时（A）消失，并且（B）触发Javascript函数？

Answer 1

我真的不跟着你。为什么你“显然”希望下拉消失？

如果你这样做，那么你应该让它消失，我不清楚这是你想要发生的“显而易见”的事情。

菜单不会消失，因为鼠标仍在悬停区域上方，这正是css应该做的事情。如果您想要其他行为，那么您确实需要使用javascript。在大多数情况下，它无关紧要，因为您要么重定向到另一个页面，要么更改当前状态（例如使用弹出对话框或其他内容。

CSS菜单适用于我用过的大部分用途。我很少使用css菜单做一些既不重定向也不会引起某种激进状态改变的东西，无论如何都会关闭菜单。

所以我想我的答案是，只是因为你有一个特定的用例使得纯css菜单难以使用，并不意味着它们对大多数其他用途没用。

话虽如此，仅仅因为你使用javascript并不意味着你必须恢复到一个完整的javascript菜单。你可以简单地使用javascript巧妙地改变标准行为，而不需要完整的js菜单的复杂性。

Answer 2

我觉得你有点困惑。您似乎认为存在二进制文件：无论是所有CSS还是所有JS。这是一种愚蠢的思考方式。当有意义使用CSS并使用JS来做那些不是CSS的东西时，你应该使用CSS。在大多数情况下，使用CSS为您完成繁重的工作（隐藏/显示菜单等），然后使用CSS无法提供的附加功能增强所述菜单，这是大多数专业前端开发人员构建菜单的方式。

Answer 3

您的问题展示了一些研究并得到了很好的解释。但是我发现有些困惑：最后你想使用javascript，因为你想要触发一些东西（一个事件，一个函数......）。

所以我的答案是：

css非常适合下拉菜单，如果你想在用户点击菜单时使用javascript，只需做这样的事情

<a href="javascript:my_function()" >Item 1</a>

my_function()函数可以执行您想要的代码，也可以隐藏所选元素。

我在这个jfiddle中做了一个例子，只使用了传统的window.alert函数，你可以用你喜欢的javascript替换它。

关于使菜单消失的问题的最后一句话：你确定你非常需要吗？当执行该功能时，可能用户的注意力集中在其他东西上，并且他将从下拉列表中移开......但我不完全清楚，因为你没有解释为什么你想让它消失。

Answer 4

我觉得不在这样的下拉列表中使用JS的目标是误导性的。如果您使用下拉列表进行导航（无论是使用#引用的外部还是页面上），则无需手动隐藏菜单。如果你将它用于任何其他功能，那么期望它必须与JS连接是合理的，这意味着“手动”操作渲染元素并不可耻。

当然，这里有另一种可能的用途。您的jsfiddle示例看起来很像一个时尚的<select>元素 - 如果这实际上是您的意图，您可以简单地用某些内容替换单个链接

<label><input type="radio" name="test-select" value="1" />Item 1</label>

然后可以原生提交 - 这样的最小形式功能可能是你没有javascript可以得到的最多

Answer 5

CSS菜单不仅仅是“可行的”。我不记得上次我用JS菜单了。不要吹嘘，但我得到了大量的访问这个菜单，我只用CSS构建。它带有图标下拉列表。

http://www.stpetersburgwebdesigner.com/2011/03/p-e-p-wayfinder-menu-for-modx-evolution/

CSS仅下拉菜单真的可行吗？

5 个答案: