将鼠标悬停在链接上时保持菜单打开答案

【问题标题】：keep menu open on hovering over a link将鼠标悬停在链接上时保持菜单打开
【发布时间】：2023-03-26 12:20:01
【问题描述】：

我正在使用 bootstrap 3，当用户将鼠标悬停在链接上时，我试图显示一个水平弹出菜单：

<div class="dropdown">
  <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="md-extension"></span>
  </a>
  <ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<style>
  .abcdef li {
      float: left;
  }

  #dropdownMenu1:hover + ul.dropdown-menu, ul.dropdown-menu:hover, ul.dropdown-menu li:hover  {
      display: block;
  }
</style>

当我将鼠标悬停在链接上时，弹出菜单会水平显示。但是，当我尝试将鼠标悬停在其中一个列表项上时，菜单就会消失。我希望菜单保持打开状态，以便用户可以单击其中一项。

我“显示：阻止”下拉菜单悬停在各种元素上，但菜单仍然没有保持打开状态。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

这是唯一的 CSS 解决方案。工作原理：首先将悬停附加到.dropdown div 而不是链接本身，然后使用伪类在链接和下拉菜单之间创建一个不可见的空间。

.dropdown:after {
      content: "";
      position: absolute;  
      bottom: -10px;
      height: 10px;
      width: 100%;
      left: 0;
      display: block;
}

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

Example

【讨论】：

【解决方案2】：

就像@sherif 所说的那样。 Javascript 是你的朋友。示例：http://jsfiddle.net/scn9p2gu/2/

HTML：

<div class="dropdown">
  <a class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="md-extension">hello</span>
  </a>
  <ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CSS：

.abcdef li {
      float: left;
  }

.theclass {
    display: block;
}

JS：

$("#dropdownMenu1").hover(
    function() {
            $("ul.dropdown-menu").addClass("theclass");
            $("#dropdownMenu1").addClass("theclass");
            setTimeout(function(){ 
                $("ul.dropdown-menu").removeClass("theclass");
                $("#dropdownMenu1").removeClass("theclass"); 
            }, 3000);
    }
);

【讨论】：

您的示例与我的问题相同。当您悬停并快速向下移动时，菜单会消失。
人力资源部。我在野生动物园，它似乎工作。我会在 chrome 上检查并发布修复。
@Donato 好了！修复了 3000 毫秒超时以删除下拉列表。

【解决方案3】：

如果你愿意，你可以使用 js 来实现这一点...DEMO

$(function () {
    $(".dropdown").hover(function () {
        $('.dropdown-menu', this).stop(true, true).fadeIn("fast");
        $(this).toggleClass('open');
    }, function () {
        $('.dropdown-menu', this).stop(true, true).fadeOut("fast");
        $(this).toggleClass('open');
    });
});

【讨论】：