3

因此，我决定开始更深入地学习 CSS，并尝试实现纯 CSS 下拉菜单/选择框。我首先研究了一些在线教程中提供的代码。

最终，我想出了这个，我认为这是相当不错的。然而，我得出的结论是，在所有情况下，CSS 菜单可能永远都不是 Javascript 菜单的合适替代品，因为当你放弃 Javascript 时会出现一些微妙的问题。

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

  • 当用户单击下拉框中的某个项目时，您显然希望下拉框消失。如果下拉框中的项目是<a>元素，则会自动发生这种情况。如果它们不是<a>元素，则下拉框不会在单击时消失 - 这给您留下了两个选择：（A）连接一些侦听的 Javascript，onclick然后使下拉框消失，或者（B ) 使用 css:active选择器将下拉框的 display属性设置为none. (A) 很愚蠢，因为此时您基本上回到了 Javascript 菜单，并且 (B) 不起作用，因为它阻止了在您单击菜单中的项目时触发 Javascript 事件。

  • 所以，你必须使用<a>标签。这意味着如果要将事件与菜单项选择相关联，则需要onclick在<a>标签中使用内联。没关系，除非您这样做，否则它会阻止下拉菜单消失（如我的 jsfiddle 链接中所示）。<a> 所以，真的，只有当用户选择一个菜单项时你想做的只是通过链接导航到另一个页面时，纯 CSS 下拉菜单才似乎可行。我找不到任何方法来触发不附带一些问题的 Javascript 函数。

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

4

5 回答 5

5

我真的不关注你。为什么您“显然”希望下拉菜单消失？

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

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

CSS 菜单适用于我使用它们的大多数用途。我很少使用 css 菜单来做一些既不会重定向也不会导致某种彻底的状态变化而无论如何都会关闭菜单的事情。

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

话虽如此，仅仅因为您正在使用 javascript 并不意味着您也必须恢复到成熟的 javascript 菜单。您可以简单地使用 javascript 来巧妙地更改标准行为，而无需完整 js 菜单的复杂性。

于 2012-05-29T22:54:44.627 回答
5

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

于 2012-05-29T23:21:24.377 回答
3

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

所以我的回答是：

css 非常适合下拉菜单，如果您想在用户单击菜单时使用 javascript，只需执行以下操作

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

然后该my_function()函数可以执行您想要的代码，也可能隐藏选定的元素。

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

关于您对使菜单消失的担忧的最后一句话：您确定您非常需要它吗？执行该功能时，用户的注意力可能会集中在其他事情上，他将从下拉列表中移开……但是我不完全知道，因为您没有解释为什么希望它消失。

于 2012-05-29T23:09:16.763 回答
3

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

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

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

然后可以本地提交 - 这种最小的表单功能可能是您在没有 javascript 的情况下可以获得的最大功能

于 2012-05-29T23:31:03.730 回答
1

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

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

于 2012-05-30T00:00:56.613 回答