bootstrap4导航菜单的二级下拉菜单鼠标悬停显示jQuery怎么实现

Release time：2019年09月01日 Author：Catfish CMS Reading volume：22406

bootstrap的导航菜单默认都是通过鼠标点击来展开的，有时我们为了让浏览者有更好的访问体验，希望实现当鼠标移动到菜单上时自动展开二级菜单，而不需要点击鼠标来展开。这篇我们就来介绍一下如何在bootstrap4下面实现这种效果。

我们下面要介绍的方法是通过jQuery来实现的，所以首先要引入jQuery，鲶鱼系统的主题里面代码如下：

<script src="{$domain}public/common/js/jquery.min.js"></script>

引入jQuery后，我们就可以在js文件里面添加如下代码：

$(".dropdown").mouseover(function(){
	$(this).addClass("show").find(".dropdown-menu").addClass("show");
});
$(".dropdown .dropdown-menu").mouseout(function(){
	$(this).removeClass("show").parent(".dropdown").removeClass("show");
});

以上代码就可以实现在使用bootstrap4制作的主题里面，鼠标移动到导航菜单上立即展开二级菜单的效果，您只需要把上面的代码复制到您的js代码中即可。

Original article, reproduced please specify：bootstrap4导航菜单的二级下拉菜单鼠标悬停显示jQuery怎么实现 | Catfish(鲶鱼) CMS

Reward

Previous：jQuery如何获取当前元素的ID

Next：如何给导航菜单添加图标

I want to comment Sign in to post a comment

User comments

wpds

Comment time：2021-02-26 00:52:33

放footer.html里就可以实现了

wpds

Comment time：2021-02-26 00:32:59

默认主题情况下，在D:\CatfishServer\web\public\default\header.html中引用该功能的js文件

结果还是没用，不知道哪里错了，折腾一天了，实在脑阔疼！

Catfish CMS

Comment time：2021-02-25 10:06:33

你自己写的js文件

wpds

Comment time：2021-02-25 01:58:12

引入jQuery后，我们就可以在js文件里面添加如下代码：

请问是否直接加到jquery.min.js文件中呢？如何添加，求解答？