在Twitter Bootstrap中实现下拉菜单背后的想法是什么?

我一直在看Twitter的Bootstrap框架,我真的很感动。 但是,我不理解下拉导航菜单工作方式背后的想法。

首先,为了查看子链接,您必须单击父链接。 我可以看到这样做的好处,但为什么不将hover方法更传统的下拉列为默认值呢?

其次,Twitter Bootstrap的下拉菜单背后的想法似乎照亮了父页面。 我可能没有那么好解释……说,你有一个简单的网页结构:

  • 关于
    • 团队
  • 服务
    • 网页设计
    • 主机
  • 联系

在传统的下拉菜单结构中,您将鼠标hover在“约”和“服务”上,并且会出现包含子链接的下拉菜单(例如“网页设计”,“托管”等)。 但是,您也可以单击父页面(即“关于”和“服务”)并访问它们。

使用Bootstrap,您不能在结构中拥有父页面,您必须使用锚标记(“#”)。 单击此按钮后,您将在下拉列表中看到这些页面。 如果有父页面,这是不好的。 从语义(“#”是什么意思?)和可访问性(javascript关闭,屏幕阅读器等)的观点来看,它也不是很好。

我可能错过了一些东西,但是有人可以解释这背后的想法,特别是关于父页面和语义html /可访问性吗?

这样做只是因为hover菜单在触摸屏设备上不能很好地工作。

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

Bootstrap的主要开发人员之一Mark Otto ( @mdo )在他的博客上回答道:

http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

有很多CSS和js hacks用于此function,但所有这些都破坏了一些东西。

我反对使用hover,但如果有人真的需要,那就适当地做吧。 我制作了一个只使用Bootstrap javascript API而没有任何黑客攻击的插件,因此它可以在所有设备上运行,而不会降低可用性:

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

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

如果你看一下那些寻找解决方案的人数就会徘徊(截至2017 – 11年,有1000个正数/约700,000个):

如何在hover而不是单击时使Twitter Bootstrap菜单下拉列表

你可以看到这个决定并没有让每个人都开心。 特别是如果您迁移具有hover菜单多年的网页,通过某种框架“强制”为新样式是很尴尬的。