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

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

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

phpStudy安装鲶鱼CMS怎样开启伪静态

phpStudy是一款PHP运行环境的集成包，为了方便，我们在调试或者运行PHP程序的时...

Refuting the article "Not...

Today, users of Catfish CMS told me that the...

使用mysql命令解决phpMyAdmin在MySQL8下面无法登录...

MySQL是一款优秀的数据库系统，有大量的应用会使用MySQL，截止本文发布，MySQL...

如何给导航菜单添加图标

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

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

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

jQuery如何获取当前元素的ID

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

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主题