1

如何编写代码，当您将鼠标悬停在使用 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在下拉菜单中的菜单上时，下拉菜单不会展开，但如果您单击它，菜单会展开。

即使您展开菜单，展开后的菜单在布局上也非常糟糕，因为展开后的菜单中有多余的空白，可能是因为我让它在某种程度上倾斜（-6 度）。

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

谢谢。

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

4

4 回答 4

6

Took me a while to find it. It's amazing howmany people post endlessly complicated stuff that doesn't work, if you google around! This simple CSS worked for me, although I can't vouch how it behaves on small devices.

.navbar-nav > li:hover > .dropdown-menu {
  display: block;
}
于 2014-02-13T21:08:12.210 回答
2

您可以尝试使用大量可用的引导相关插件之一，例如https://github.com/CWSpear/twitter-bootstrap-hover-dropdown？

或者这不是你要找的吗？

于 2013-11-01T20:41:57.993 回答
1

使用下面的 CSS 来切换和悬停菜单。

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

这很简单

于 2014-07-07T09:57:34.910 回答
0

如果你想要一些超级轻量级​​的东西，而不需要任何插件或不必为你的代码添加更多属性，那么将这个 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>
于 2014-01-25T13:04:11.947 回答