Question

现在我的导航下拉列表可以点击打开。

我希望它在悬停时打开。我该怎么做？

Answer 1

只需添加以下css

即可

class Item:
    position = ['key','a','b','c']
    def__init__(self, **kwargs):
        for key in Item.position:
            setattr(self,key,kwagrs.get(key, None))

fiddle

＆＃13;

.dropdown:hover>.dropdown-menu {
 display: block;
}

＆＃13;

.dropdown:hover>.dropdown-menu {
  display: block;
}

＆＃13;

Answer 2

Znaneswar的CSS工作得很好，但我也会添加这条线。

.dropdown-menu {
  margin: -0.125rem 0 0;
}

下拉列表与产生下拉列表的元素间隔0.125rem。因此，当您将鼠标移到该间隙时，您将很难从链接导航到下拉列表而不会消失。

如果您希望下拉链接实际上也是一个链接，只需从标记中删除此属性

data-toggle="dropdown"

Answer 3

css以下正常

.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;   // Add this, to prevent clicking dropdown's default click function
}

Answer 4

<div class="dropdown">
...
</div>

您可以尝试使用jQuery：

$(".dropdown").hover(function(){
$(this).addClass("show");
});

Answer 5

我使用Angular结合ng-bootstrap和bootstratp获得了这个解决方案：

CSS：

.dropdown:hover>.dropdown-menu {
display: block;}

HTML：

      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link h5 dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
          Parent</a>
          <div ngbDropdownMenu class="dropdown-menu">
            <a class="dropdown-item" href="#" ngbDropdownItem>Child1</a>
            <a class="dropdown-item" href="#" ngbDropdownItem>Child2</a>
          </div>
      </li>

因此，如果不使用CSS属性，则仅在单击父链接时才会发生下拉菜单。

Answer 6

虽然我很欣赏这个问题的答案，但是给出的答案似乎并不是最好的。这是因为这些答案无视可访问性。

请注意，当仅使用CSS在.nav-link上显示下拉菜单时，aria-expanded元素上的.nav-link参数不会变为true。

您必须先使用一些JS才能拥有全部的辅助功能。

下面是我想出的解决方法。

// header_scripts.js

$('body').on('hover', '.nav-item.dropdown', function() {
    $(this).find('.dropdown-toggle').dropdown('toggle');
});

/* header.css */

.dropdown-menu {
    margin: 0 0 0 0;
}

上面的代码应该提供与您在此问题的其他答案中看到的功能相同的功能，但完全具有可访问性。

我提供的CSS非常通用，并且特异性很低，因此请按照自己的意愿进行处理。

如何在bootstrap 4中悬停下拉列表

6 个答案: