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

Release time:2019年09月01日 Author:Catfish CMS Reading volume:7841

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


Latest release

鲶鱼CMS和鲶鱼Blog自制登录页面代码怎么实现

我们在《鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》一文里面介绍了怎么在制作主题的时候自...

鲶鱼CMS和鲶鱼Blog怎么自定义注册页面

我们在《 鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》这一篇里面介绍了如何自己制作一个登...

鲶鱼CMS和鲶鱼Blog怎么自定义登录页面

我们在使用鲶鱼cms和鲶鱼blog时,有的时候希望根据自己的需求设计登录页面,该怎么办?...

Catfish(鲶鱼) CMS和Catfish(鲶鱼) blog主题...

第五版Catfish(鲶鱼) CMS和Catfish(鲶鱼) blog主题制作手册已经正...

MIME在form表单的文件上传中的应用

我们在制作文件上传时,通常会使用HTML标签“<input type="...

域名商不给域名转移码怎么办,到哪里投诉

我们在做网站的期间,有的时候由于部分原因,希望换一个域名商,这时就需要原来的域名商提供转...

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 - 2020 Catfish(鲶鱼) CMS
Catfish(鲶鱼) CMS〖181836340〗 Catfish(鲶鱼) CMS 二群〖292598750〗

   I want to leave a message
Catfish(鲶鱼) CMS V 4.9.81