3

如果我们有子菜单,那么它们默认是可见的,我们必须滚动和滚动。请看看我想要什么,但它适用于 Bootstrap 以前的版本。我正在研究 2.1.1,我相信它应该是 Bootstrap 中的默认功能(他们在新版本中改变了很多东西)

请看这里:

http://jsfiddle.net/nczJF/

我正在寻找这样的菜单行为,其中主菜单和子菜单仅通过单击相关子菜单出现。我搜索了很多,但所有这些都是针对 Bootstraps 以前的版本。所以有人有专家建议吗?

4

1 回答 1

3

http://jsfiddle.net/nczJF/39/

这使用最新版本的引导程序。唯一不同的是CSS,JS是一样的。

在 bootstrap-responsive.css 中,从以下位置删除display: block(不要切换为不显示):

.nav-collapse .dropdown-menu {
  position: static;
  top: auto;
  left: auto;
  float: none;
  display: block; /* remove this line! */
  max-width: none;
  padding: 0;
  margin: 0 15px;
  background-color: transparent;
  border: none;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

在同一个文件的底部,更改height: 0height: auto

.nav-collapse,
.nav-collapse.collapse {
  height: auto; /* instead of 0 */
  overflow: hidden;
 }

然后,要修复默认展开视图,请更改您的 html. 将类添加collapsed到折叠按钮:

<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">

也改变

<div class="nav-collapse">

<div class="nav-collapse collapse" style="height: 0px; ">

编辑 JS 可能会更优雅,但这无需更改另一个文件即可工作。

我在这里推动此功能的集成:https ://github.com/twitter/bootstrap/issues/5606

于 2012-10-30T18:00:38.960 回答