如何制作悬停效果而不是单击引导程序 4 下拉菜单？ [复制]
Posted
技术标签:
【中文标题】如何制作悬停效果而不是单击引导程序 4 下拉菜单？ [复制]【英文标题】：How to make hover effect instead of click in bootstrap 4 dropdown menu? [duplicate] 【发布时间】：2018-10-11 11:32:54 【问题描述】：如何在引导下拉菜单中制作悬停效果而不是点击？
以前的答案不包含 jquery 代码，您可以将其粘贴到自己的脚本中并获得很好的结果。除此之外，以前的答案是为旧版本的引导程序编写的，而对于引导程序 4，它们不起作用。例如this question 太旧，+ 当前问题包含一小段代码，适用于所有人。
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item uppercase aboutUs" href="#">About us</a>
<a class="dropdown-item uppercase" href="#">Company</a>
<a class="dropdown-item uppercase" href="#">Our process</a>
<a class="dropdown-item uppercase" href="#">Services</a>
<a class="dropdown-item uppercase" href="#">Contact us</a>
<a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>【问题讨论】：
看看this question @MasterYoda - 截至 2018 年 7 月 18 日，该问题仅针对 v3 及以下版本 【参考方案1】：只需在hover() 上触发点击事件即可：
$('.nav-link').hover(function()
$(this).trigger('click');
, function() );<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item uppercase aboutUs" href="#">About us</a>
<a class="dropdown-item uppercase" href="#">Company</a>
<a class="dropdown-item uppercase" href="#">Our process</a>
<a class="dropdown-item uppercase" href="#">Services</a>
<a class="dropdown-item uppercase" href="#">Contact us</a>
<a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
</div>
</li>
</ul>【讨论】：
【参考方案2】：您可以使用 jquery 添加鼠标悬停事件并应用单击事件添加的相同样式和属性..
$( ".dropdown-menu" ).css('margin-top',0);
$( ".dropdown" )
.mouseover(function()
$( this ).addClass('show').attr('aria-expanded',"true");
$( this ).find('.dropdown-menu').addClass('show');
)
.mouseout(function()
$( this ).removeClass('show').attr('aria-expanded',"false");
$( this ).find('.dropdown-menu').removeClass('show');
);<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item uppercase aboutUs" href="#">About us</a>
<a class="dropdown-item uppercase" href="#">Company</a>
<a class="dropdown-item uppercase" href="#">Our process</a>
<a class="dropdown-item uppercase" href="#">Services</a>
<a class="dropdown-item uppercase" href="#">Contact us</a>
<a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>防止鼠标移出后菜单被隐藏的解决方法是将 margin-top:0 设置为下拉菜单
【讨论】：
已经更新了答案...以上是关于如何制作悬停效果而不是单击引导程序 4 下拉菜单？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章