删除下拉链接并在导航栏菜单中显示其所有项目

Question

我正在使用Twitter Bootstrap及其顶部的典型Twitter Bootstrap导航栏菜单的响应式设计。

在那里我有一些链接和一个下拉菜单。当我将浏览器的大小调整为768px或更低时，它会转换为一种新的导航菜单。

这一切都可以正常使用，但我想要的是下拉菜单也会扩展。

现在发生的事情是下拉菜单仍然崩溃。当我打开它时，它会在该菜单容器中创建一个我真的不喜欢的滚动条。

这是我的意思截图：

示例：http://getbootstrap.com/examples/jumbotron/

如何删除打开/关闭Dropdown链接，并在该菜单中列出所有项目，以便它不会在菜单一侧创建丑陋的滚动条？

Answer 1

您可以将问题分为三个部分：

1。滚动条

默认情况下，下拉菜单的固定（最大）高度为340px（溢出-y：auto，另见：Twitter bootstrap 3 navbar navbar-right outside navbar-collapse）。

您可以通过从navbar.less中删除它（第52行max-height: 340px;）并重新编译Bootstrap来撤消此最大高度。或者在文档中的Bootstrap css之后添加一些css：

@media(max-width:767px)
{    
.navbar-collapse {
     max-height: none;
}
}

请注意，当菜单的高度变为屏幕高度时，由于导航栏的固定位置，您无法滚动内容。

2。崩溃时打开dropmenu

在第一眼看到你应该在崩溃时向dropmenu添加一个开放类，但是dropdown.js的clearmenus函数将删除这个类。添加display：block将显示下拉菜单，但其状态/显示将类似于非折叠。

解决方案是添加一个与open类相同样式的类，该类不会被clearmenus删除。

  $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
  $('.navbar-collapse .dropdown-toggle').parent().addClass('opened');
  });

要为打开的类提供与open类相同的样式，您需要更改.less文件并在其后重新编译Bootstrap。

navbar.less（第215行）中的

// Dropdowns get custom display when collapsed
.open .dropdown-menu, .opened .dropdown-menu {

in dropdown.less（第119行）

//打开下拉列表的状态 .opened，.open {

调整大小

上面的下拉菜单在撤消崩溃后（通过调整屏幕大小）保持可见，以防止在Bootstrap的CSS之后添加一些css（你也可以将它添加到Less文件中）：

@media(min-width:768px)
{    
.nav > li.opened .dropdown-menu {display: none;}
.nav > li.open .dropdown-menu {display: block;}
}

下拉列表中的链接样式

您的导航栏使用navbar-inverse来设置样式（另请参阅：https://stackoverflow.com/questions/18936357/using-multiple-navbars-with-twitters-bootstrap-3/18936358#18936358） Navbar-inverse也将在navbar.less中定义。要设置opend类的链接颜色，请使用：

@media (max-width: @screen-xs-max) {
  // Dropdowns get custom display
  .open .dropdown-menu, .opened .dropdown-menu {

3。删除下拉链接

在Bootstrap的CSS之后

css：

@media(max-width:767px)
{    
.nav > li > a.dropdown-toggle{display:none;}
}

演示：http://jsfiddle.net/pgK4y/

另请参阅：https://github.com/twbs/bootstrap/issues/10758

Answer 2

默认情况下在移动/小分辨率下打开下拉列表，
这是使用jquery的另一种方法，它不涉及使用较少的代码或css。

tp://stackoverflow.com/a/23202921/1174172