那些遇到过的问题

如何在Bootstrap v4中实现Navbar下拉悬停？

Exp*_*ove 41 html css twitter-bootstrap

我对新的bootstrap版本有点困惑,因为他们将下拉菜单更改为div:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

您是否有任何想法在该片段的Dropdown链接中获取悬停下拉列表而无需添加其他脚本代码(仅来自bootstrap的css和脚本)？我已经看过bootstrap css类,我无法与bootstrap V3中的那些相关(我在V3中没有添加jquery就实现了这一点).

And*_*hiu 114

简单的CSS唯一解决方案:

.dropdown:hover>.dropdown-menu {
  display: block;
}
Run Code Online (Sandbox Code Playgroud)

单击时,它仍将使类show切换到它(并且在不再盘旋时将保持打开状态).

要妥善解决这个问题,请使用为基于指针的设备保留的事件和属性:jQuery mouseenter,mouseleave和:hover.如果工作顺利,直觉,而不是干扰都与下拉如何工作的触摸设备.尝试一下,让我知道它是否适合你:

完整的jQuery解决方案(触摸未触摸):

Pre v4.1.2解决方案(不建议使用):

$('body').on('mouseenter mouseleave','.dropdown',function(e){
  var _d=$(e.target).closest('.dropdown');
  if (e.type === 'mouseenter')_d.addClass('show');
  setTimeout(function(){
    _d.toggleClass('show', _d.is(':hover'));
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
  },300);
});
Run Code Online (Sandbox Code Playgroud) 

$('body').on('mouseenter mouseleave','.dropdown',function(e){
  var _d=$(e.target).closest('.dropdown');
  if (e.type === 'mouseenter')_d.addClass('show');
  setTimeout(function(){
    _d.toggleClass('show', _d.is(':hover'));
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
  },300);
});

/* this is not needed, just prevents page reload when a dd link is clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())
Run Code Online (Sandbox Code Playgroud) 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href>Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href>Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href>Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href>Action</a>
          <a class="dropdown-item" href>Another action</a>
          <a class="dropdown-item" href>Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

v4.1.2 shiplist将这一变化引入了下拉列表的工作方式,使上述解决方案不再有效.
这是在v4.1.2及更高版本中悬停时打开下拉列表的最新解决方案:

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);
Run Code Online (Sandbox Code Playgroud) 

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
      _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

/* not needed, prevents page reload for SO example on menu link clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())
Run Code Online (Sandbox Code Playgroud) 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

重要说明:如果使用jQuery解决方案,则删除CSS一个很重要(或者在.dropdown-toggle单击时或单击菜单选项时不会关闭下拉列表).

  • 添加这个修复了上述解决方案中的差距..dropdown&gt;.dropdown-menu { margin: 0; } (3认同)
  • 使用[`拆分按钮]]（http://v4-alpha.getbootstrap.com/components/dropdowns/#split-button-dropdowns）。它们正是为此而制造的。 (2认同)

Moh*_*han 38

只需在样式表中添加这个简单的css代码即可开始使用.

.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud)

  • 这是最好的答案 (5认同)
  • 不幸的是，这不是最好的答案；它错过了切换很多类和触发事件 (3认同)

Lio*_*elW 10

Andrei的"完整"jQuery + CSS解决方案具有正确的意图,但它很冗长且仍然不完整.不完整,因为虽然它可能涵盖了所有必要的DOM更改,但它缺少自定义事件的触发.详细说明,因为当Bootstrap已经提供dropdown()方法时,它会重新发明轮子,它可以完成所有操作.

所以正确的,DRY解决方案,它不依赖于CSS hack经常在其他答案中重复,只是jQuery:

$('body').on('mouseover mouseout', '.dropdown', function(e) {
    $(e.target).dropdown('toggle');
});
Run Code Online (Sandbox Code Playgroud)

mib*_*ogo 6

自v4发布以来,Bootstrap的功能似乎略有改变.该项.dropdown-menu似乎现在也得到了.show除了.dropdown.我改编了安德烈的答案,也在课堂上进行了调整.dropdown-menu.请注意,不再需要CSS,并且HTML是相同的,除了我更新了当前版本的链接并更改了导航类navbar-expand-md.

$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
    var dropdown = $(e.target).closest('.dropdown');
    var menu = $('.dropdown-menu', dropdown);
    dropdown.addClass('show');
    menu.addClass('show');
    setTimeout(function () {
        dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
        menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
    }, 300);
});
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

Zim*_*Zim 5

Bootstrap 4仅CSS

没有一个CSS只能完全解决问题。单击后，下拉菜单保持打开状态，或者存在一定的缝隙，使下拉菜单隐藏，然后才能访问要单击的菜单链接。

这是仅CSS的简单解决方案：

.navbar-nav li:hover .dropdown-menu {
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

data-toggle=dropdown从HTML标记中删除，以防止下拉列表在单击中保持打开状态。使用mt-0（margin-top：0）消除菜单上方的空白，并使悬停菜单项成为可能。

演示https://www.codeply.com/go/awyU7VTIJf

完整代码：

   .navbar-nav li:hover .dropdown-menu {
        display: block;
    } 

   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      ..
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
              Dropdown
            </a>
            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
Run Code Online (Sandbox Code Playgroud)

  • “mt-0”尖端是黄金。我的下拉菜单有时会消失，有时不会。 (2认同)

归档时间：

查看次数：

97441 次

最近记录：

5 年，9 月 前
相关归档
将外部css的范围限制为仅限于特定元素？ 64
如何使用纯JavaScript使HTML元素可调整大小？ 58
HTML5视频 - 已加载百分比？ 36
选择选项中的字体真棒图标 35
如何将动态数据绑定到ARIA-LABEL？ 21
使用nth-child来设置第4项及其后的样式 20
GWT-Bootstrap与GwtBootstrap3 18
在Rails 3.2 + SimpleForm中显示嵌套表单的错误字段 9
如何使用@media媒体查询定位特定的屏幕大小？ 5
无法在 Bootstrap 导航栏中通过 Tab 键选择下拉菜单 2
难疑归档
为什么处理排序数组比处理未排序数组更快？ 23665
什么是正确的JSON内容类型？ 9962
检查shell脚本中是否存在目录 3556
是否有唯一的Android设备ID？ 2645
在一行中捕获多个异常(块除外) 2521
npm package.json文件中依赖项,devDependencies和peerDependencies之间有什么区别？ 1872
JavaScript中==和===之间的区别 1592
外部"C"在C++中有什么影响？ 1511
将JavaScript字符串转换为全部小写？ 1260
异步与同步执行,它到底意味着什么？ 1126