Question

如何编写代码，当您将鼠标悬停在使用Twitter Bootstrap 3实现的下拉菜单上时，会显示下拉菜单，用户可以点击展开的下拉菜单的链接？

我写了以下HTML：

        <nav>
            <ul id="mainMenu">
                <li><a href="/">Home</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown">Blog<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/1">1</a></li>
                        <li><a href="/2">2</a></li>
                    </ul>
                </div>
                </li>

            </ul>
        </nav>

以下CSS：


ul#mainMenu li {
    display: inline-block;
    padding: 3px;
    background-color: orange;
    border-radius: 5px;
    -webkit-transform: skewX(-6deg);
}

ul#mainMenu li:hover {
    background-color: green;
}

但是，当您将鼠标悬停在下拉菜单中的Blog菜单上时，下拉菜单不会展开，但如果单击它，菜单会展开。

即使您展开菜单，扩展菜单在布局上也很可怕，因为扩展菜单中有多余的空白区域，可能是因为我在某种程度上倾斜了（-6deg）。

此外，展开的菜单水平放置，而不是垂直放置。我不知道它为什么水平放置，但我可以解决它吗？

感谢。

[更新] 由于某些原因，HTML代码无法正确显示。现在我必须检查如何解决它，如果我知道如何解决它，我会做。我在<pre><code>标签中写了这些信息以供您参考。

Answer 1

花了我一会儿找到它。令人惊讶的是，如果你在谷歌周围，很多人发布无法复杂的东西是行不通的！这个简单的CSS对我有用，虽然我无法保证它在小型设备上的表现。

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

Answer 2

你可以尝试一下大量可用的bootstrap相关插件，比如https://github.com/CWSpear/twitter-bootstrap-hover-dropdown？

或者不是你要找的东西？

Answer 3

使用以下CSS同时切换和悬停菜单。

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

简单

Answer 4

如果你想要超轻量级的东西而不需要任何插件或者必须在代码中添加更多属性，那么将这个JS代码放到你的页面中，你的所有下拉列表现在应该在悬停时打开：

<script>
var bMobile;  // true if in mobile mode

// Initiate event handlers
function init() {
  // .navbar-toggle is only visible in mobile mode
  bMobile = $('.navbar-toggle').is(':visible');
  var oMenus = $('.navbar-nav .dropdown'),
    nTimer;
  if (bMobile) {
    // Disable hover events for mobile
    oMenus.off();
  } else {
    // Set up menu hover for desktop mode
    oMenus.on({
      'mouseenter touchstart': function() {
        event.preventDefault();
        clearTimeout(nTimer);
        oMenus.removeClass('open');
        $(this).addClass('open');
      },
      'mouseleave': function() {
        nTimer = setTimeout(function() {
          oMenus.removeClass('open');
        }, 500);
      }
    });
  }
}
$(document).ready(function() {
  // Your other code to run on DOM ready...
  init();
});

$(window).resize(init);
</script>

将鼠标悬停在Twitter Bootstrap中的下拉菜单中

4 个答案: