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
鲶鱼cms系统5.2.0版以及鲶鱼Blog系统3.2.0版在编辑文章页面新增了上传附件功...
我们在《鲶鱼CMS和鲶鱼Blog怎么自定义注册页面》一文里面介绍了如何通过制作主题文件来...
在实际建站过程中,往往需要进行网站备案,那么当我们备案之后,需要按要求在自己网站上放上备...
鲶鱼Blog系统可以在后台上传升级包进行升级,有些用户可能会很长时间没有升级,这样可能会...
我们在《鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》一文里面介绍了怎么在制作主题的时候自...
我们在《 鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》这一篇里面介绍了如何自己制作一个登...
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 ...