bootstrap的导航菜单默认都是通过鼠标点击来展开的,有时我们为了让浏览者有更好的访问体验,希望实现当鼠标移动到菜单上时自动展开二级菜单,而不需要点击鼠标来展开。这篇我们就来介绍一下如何在bootstrap4下面实现这种效果。
我们下面要介绍的方法是通过jQuery来实现的,所以首先要引入jQuery,鲶鱼系统的主题里面代码如下:
<script src="{$domain}public/common/js/jquery.min.js"></script>
引入jQuery后,我们就可以在js文件里面添加如下代码:
$(".dropdown").mouseover(function(){以上代码就可以实现在使用bootstrap4制作的主题里面,鼠标移动到导航菜单上立即展开二级菜单的效果,您只需要把上面的代码复制到您的js代码中即可。
$(this).addClass("show").find(".dropdown-menu").addClass("show");
});
$(".dropdown .dropdown-menu").mouseout(function(){
$(this).removeClass("show").parent(".dropdown").removeClass("show");
});
Original article, reproduced please specify:bootstrap4导航菜单的二级下拉菜单鼠标悬停显示jQuery怎么实现 | Catfish(鲶鱼) CMS
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文件中呢?如何添加,求解答?
我们在做主题的时候,有时需要在页面单独显示当前菜单下的二级菜单,这个在鲶鱼系统里面有两种...
由于PHP软件的运行都需要服务器运行环境,虽然可以找到很多PHP的集成环境来使用,但是多...
我们在使用博客网站的时候,经常会希望对自己发布的文章进行归档处理,例如每个月发布了哪些文...
鲶鱼系统可以使用找回密码功能,但是在开启找回密码功能之前,我们必须要进行一项设置,就是S...
现代程序开发多是使用框架来写应用程序,因为框架可以带来事半功倍的效果。对于PHP程序也是...
鲶鱼cms系统5.2.0版以及鲶鱼Blog系统3.2.0版在编辑文章页面新增了上传附件功...
Management background is composed of five bl...
In the previous section, we talked about how...
In the previous section we talked about how ...
To the last section we have learned to use t...
By the end of the previous section, we have ...