删除下拉链接，并在导航栏菜单中显示其所有项目 [英] Remove dropdown link and show all of its items in navbar menu

问题描述

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

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

所有的工作都很好的开箱，但我想要的是，下拉菜单也扩大了。

现在发生的是下拉菜单仍然折叠。当我打开它，它然后创建一个滚动条内的菜单容器，我真的不喜欢。

这里是我的意思的截图：

>

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

如何删除打开/关闭下拉菜单链接，并将其所有项目列在该菜单中，

解决方案

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

1。滚动条

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

您可以从navbar.less中删除此max-height（第52行 max-height：340px; ），并重新编译Bootstrap。或者在文档中的Bootstrap的css之后添加一些css：

  @media（max-width：767px）
 {
 .navbar-collapse {
 max-height：none; 
} 
} 
  

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

2。打开折叠后的下拉菜单

首先，你应该在折叠时向dropmenu添加一个打开的类，但dropdown.js的clearmenus函数将删除这个类。添加显示：块将显示下拉菜单，但其状态/显示将类似于未折叠。

一个解决方案是添加一个类， open 类不会被clearmenus删除。

  $（document）.on（'click.bs.collapse.data-api'，'[data-toggle = collapse]'，function（e）{
 $（'。navbar-collapse .dropdown-toggle' ）.parent（）。addClass（'opened'）; 
}）; 
  

要给打开的类与开放类相同的样式，您需要更改.less文件

在navbar.less（line：215）

  //下拉菜单在折叠时获得自定义显示
 .open .dropdown-menu，.opened .dropdown-menu {
  

in dropdown.less（line：119）

//打开下拉菜单的状态
.opened，.open {

resize

通过上述操作，撤消折叠（通过调整屏幕大小）防止这个在Bootstrap的CSS之后添加一些CSS（你也可以添加到你的Less文件）：

  @media ：768px）
 {
 .nav> li.opened .dropdown-menu {display：none;} 
 .nav> li.open .dropdown-menu {display：block;} 
} 
  

下拉菜单中的链接

您的导航栏使用navbar-inverse设置样式（另见：使用（多个）navbars与Twitter的Bootstrap 3 ）
Navbar-inverse将在navbar.less中定义。要设置opend类的链接颜色，请使用：

  @media（max-width：@ screen-xs-max ）{
 //下拉菜单获得自定义显示
 .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

I'm using Twitter Bootstrap and its responsive design for the typical Twitter Bootstrap navbar menu at the top.

In there i have a few links and a dropdown menu. When i resize my browser to 768px or less, it hen transforms into a new sort of nav menu.

This all works fine out of the box, but what i'd like to have is that the dropdown menu is also expanded.

What happends now is that the dropdown menu is still collapsed. When i open it, it then creates a scrollbar inside that menu container which i really don't like.

Here's a screenshot of what i mean:

Example: http://getbootstrap.com/examples/jumbotron/

How can i remove the open/close Dropdown link, and have all of its items listed inside that menu so that it doesn't create an ugly scrollbar on the side of the menu?

解决方案

You could split your problem in three parts:

1. the scrollbar

By default the dropdown menu get a fixed (max) height of 340px (and a overflow-y:auto, see also: Twitter bootstrap 3 navbar navbar-right outside navbar-collapse).

You can undo this max-height by remove it (line 52 max-height: 340px;) from navbar.less and recompile Bootstrap. Or add some css after Bootstrap's css in your document:

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

Note when the height of the menu becomes the height of your screen, you can't scroll your content due to the fixed position of your navbar.

2. open the dropmenu on collapse

On the first sight you should add an open class to the dropmenu on collapse, but the clearmenus function of dropdown.js will remove this class. Adding a display:block will show the dropdown menu, but its state /display will be like non collapsed.

A solution will be to add a class with the same styles as the open class which won't be remove by the clearmenus.

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

To give the opened class the same styles as the open class you will need to change your .less files and recompile Bootstrap after it.

in navbar.less (line: 215)

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

in dropdown.less (line: 119)

// Open state for the dropdown .opened, .open {

resize

With the above the dropdown menu stays visible after undo the collapse (by resizing the screen) to prevent this add some css after Bootstrap's CSS (you could also add this to your Less files):

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

styling of the links in the dropdown

Your navbar use navbar-inverse to style it (see also: Using (multiple) navbars with Twitter's Bootstrap 3) Navbar-inverse will be defined in navbar.less too. To set the link colors for the opend class too, use:

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

3. remove the dropdown link

css after Bootstrap's CSS:

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

Demo: http://jsfiddle.net/pgK4y/

See also: https://github.com/twbs/bootstrap/issues/10758

这篇关于删除下拉链接，并在导航栏菜单中显示其所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！