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

Reward

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文件中呢?如何添加,求解答?



Latest release

鲶鱼系统如何实现独立显示联动二级菜单

我们在做主题的时候,有时需要在页面单独显示当前菜单下的二级菜单,这个在鲶鱼系统里面有两种...

鲶鱼CMS绿色集成环境PHP5.6版

由于PHP软件的运行都需要服务器运行环境,虽然可以找到很多PHP的集成环境来使用,但是多...

鲶鱼Blog的归档标签怎么使用

我们在使用博客网站的时候,经常会希望对自己发布的文章进行归档处理,例如每个月发布了哪些文...

smtp怎么设置详解

鲶鱼系统可以使用找回密码功能,但是在开启找回密码功能之前,我们必须要进行一项设置,就是S...

Jsnpp框架介绍

现代程序开发多是使用框架来写应用程序,因为框架可以带来事半功倍的效果。对于PHP程序也是...

鲶鱼系统怎么添加附件以及如何在前端页面展示

鲶鱼cms系统5.2.0版以及鲶鱼Blog系统3.2.0版在编辑文章页面新增了上传附件功...

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 ...

Copyright © 2015 - 2022 Catfish(鲶鱼) CMS
Catfish(鲶鱼) CMS〖181836340〗 一群已满,请加二群:Catfish(鲶鱼) CMS 二群〖292598750〗

   I want to leave a message