【问题标题】:Bootstrap, CSS, JS - Bootstrap file menubar hover after clickBootstrap、CSS、JS - 单击后引导文件菜单栏悬停
【发布时间】:2012-05-13 03:19:40
【问题描述】:
我想制作一个使用 twitter 引导框架的应用程序。我有一个导航栏,其功能类似于带有文件/编辑/帮助/等的文件菜单栏。
我喜欢您需要单击以使下拉菜单出现这一事实,但是我如何才能将其设置在下拉编辑菜单的位置,例如从“文件”菜单移动时(单击并下拉后)。
这方面的一个例子是谷歌文档,点击一个菜单,然后移动到另一个菜单项,它将下拉新的悬停菜单
【问题讨论】:
标签:
javascript
jquery
css
twitter-bootstrap
【解决方案1】:
我的解决方案:为您的 <ul> 元素创建两个类。
一个例如doc-menu 另一个normal-menu。
在菜单项上单击:您的<li> 应该得到class="active" 和<ul class="doc-menu"。
然后在<li class="active"> 中显示内部<ul><li>....</ul> 并保持它即使没有悬停。在其他doc-menu 项目悬停上,您将活动类更改为其他<li> 元素。这可以通过使用 javascript 收听mouseover 来完成。单击背景或内部<ul><li>....</ul> 时,将<ul class="doc-menu"> 更改为<ul class="normal-menu>