在 Twitter Bootstrap 中实现下拉菜单背后的想法是啥？ [关闭]

Posted 2023-03-06

【中文标题】在 Twitter Bootstrap 中实现下拉菜单背后的想法是啥？ [关闭]

【英文标题】：What was the thinking behind the implementation of the dropdown menu in Twitter Bootstrap? [closed]在 Twitter Bootstrap 中实现下拉菜单背后的想法是什么？ [关闭]

【发布时间】：2012-03-15 01:16:01

【问题描述】：

我一直在研究 Twitter 的 Bootstrap 框架，我印象非常深刻。但是，我不明白下拉导航菜单工作方式背后的想法。

首先，要查看子链接，您必须单击父链接。我可以看到这样做的好处，但为什么不将更传统的悬停下拉方法作为默认方法？

其次，Twitter Bootstrap 下拉菜单背后的想法似乎照亮了父页面。我可能解释得不是很好... 比如说，你有一个简单的网页结构：

首页

关于

团队

服务

网页设计 托管 域

联系方式

在传统的下拉菜单结构中，您将鼠标悬停在“关于”和“服务”上，然后会出现包含子链接（例如“网页设计”、“托管”等）的下拉菜单。但是，您也可以单击父页面（即“关于”和“服务”）并访问它们。

使用 Bootstrap，您的结构中不能有父页面，您必须使用锚标记（“#”）。单击此按钮后，您会在下拉列表中看到页面。如果有父页面，这不好。从语义（“#”是什么意思？）和可访问性（javascript 关闭、屏幕阅读器等）的角度来看，它也不是很好。

我可能遗漏了一些东西，但有人能解释一下这背后的想法，尤其是在父页面和语义 html/可访问性方面吗？

【问题讨论】：

您只会收到基于对此主题的意见的答案，因此要获得直接的答案，为什么不联系引导程序的主要开发人员？以下是开发者的 Twitter 句柄：@mdo、@fat。

我肯定对主要开发人员的意见感兴趣，但也对其他人的意见以及在我上面强调的案例中人们如何使用 Bootstrap 导航栏感兴趣。

【参考方案1】：

这样做只是因为悬停菜单在触摸屏设备上效果不佳。

https://github.com/twitter/bootstrap/issues/1029

【讨论】：

谢谢。 github上的评论基本回答了这个问题。我可以看到在移动设备上使用相同菜单时的主要优势，因为您无法通过单击移动设备看到悬停下拉菜单。然而，这并不能解决我上面提出的可访问性和语义问题。我会联系 Mark Otto，因为他在博客上提到了这篇文章！

【参考方案2】：

对于这个功能有很多 CSS 和 js hack，但它们都破坏了一些东西。

我反对使用悬停，但如果有人真的需要，那就正确地使用。我制作了一个插件，它只使用 Bootstrap javascript API，没有任何黑客攻击，因此它适用于所有设备，不会影响可用性：

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

【参考方案3】：

设计决策由 Twitter 上的人员完成，请参阅 http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

如果您查看寻找解决方案以恢复悬停的人数（截至 2017-11 年大约有 1000 人积极/大约 700000 人）：

How to make Twitter Bootstrap menu dropdown on hover rather than click

你可以看到这个决定并没有让每个人都开心。尤其是如果您迁移具有悬停菜单多年的网页，那么被某些框架“强制”为新样式是很尴尬的。