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

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

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代码中即可。

I want to comment Sign in to post a comment

Latest release

如何给导航菜单添加图标

我们访问某些网站的时候，会发现导航菜单的文字前面有一个小图标，如下图所示： 在鲶鱼系统...

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

bootstrap的导航菜单默认都是通过鼠标点击来展开的，有时我们为了让浏览者有更好的访...

jQuery如何获取当前元素的ID

jQuery是一个优秀的JavaScript库，给前端页面的制作带来了极大的方便，鲶鱼系...

鲶鱼系统如何使用bootstrap4以及其辅助标签

Catfish(鲶鱼) CMS从4.9.3版开始原生支持bootstrap4，Catfi...

关于捐助款项的使用情况通报

自鲶鱼系统创建开始，截止于2019年7月31日，累计收到捐助款项179.46元（包含截止...

bootstrap4如何实现div的水平居中以及垂直居中

bootstrap是一款十分流行的前端组件库，我们在制作模板的时候，使用bootstra...

How to use the Catfish CMS system

Section 1: How to add articles

Management background is composed of five bl...

Section 2: to the article to add c...

In the previous section, we talked about how...

Section 3: Add a menu to your site

In the previous section we talked about how ...

Section 4: Page Setup

To the last section we have learned to use t...

Section 5: Change website name, LO...

By the end of the previous section, we have ...

主题下载

绿色目录主题标准版 GreenD theme for Catfish-CMS

mdIV主题

cBlog-mdIV主题

mdIII主题

cBlog-mdIII主题

mdII主题