带有jquery悬停菜单选项卡的Bootstrap固定顶部导航栏

Question

我正在学习如何在构建网站时使用bootstrap框架。并且有一个我想要复制的导航栏悬停效果。请参阅bootstrap提供的下面的示例。 https://www.aceandtate.com/ 效果是：当鼠标悬停在导航栏容器区域时，导航栏只会显示菜单文本。 Navbar white unfold drops while mouse hover

有谁能告诉我该怎么做？

谢谢，

Answer 1

首先，使用bootstrap创建下拉列表。 （我假设你在一个文件夹中有index.html，css文件夹和js文件夹）。 index.html使用bootstrap创建下拉菜单。

在你的js文件夹中，编辑（如果没有则）你的script.js文件。 添加此脚本

$('ul.nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

之后，请包含该脚本（如果尚未包含在您的html文件中）

<script src="js/scripts.js"></script>

我把它放在

之前

</body>

现在，当您将鼠标悬停在

时，您的下拉菜单会自动显示

来源：http://codepen.io/betdream/pen/frDqh

Answer 2

尝试使用菜单下拉菜单悬停：

  

添加此JS：

$('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });

如果要显示菜单始终在移动设备中打开，请在CSS文件中添加媒体查询并设置属性display:block

对于媒体查询，请查看此内容以供参考 MEDIA QUERIES FOR COMMON DEVICE