最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Bootstrap实现鼠标悬停下拉菜单及下拉主菜单可点击效果
时间：2022-06-25 17:25:56 编辑：袖梨 来源：一聚教程网
Bootstrap是一个非常不错的前端框架，但是在实际的使用过程中还需要根据实际的需要再微调整，比如我们默认使用Bootstrap框架下拉菜单的时候主导航是无法点击打开页面的，以及下拉展开需要单击主菜单，如果我们需要实现主菜单可以点击打开，而且下拉菜单实现悬停下拉的效果则需要进行调整JS脚本。
第一、实现悬停下拉菜单效果
1、修改
bootstrap.js文件2、添加脚本
| 代码如下 | 复制代码 |
|
$(document).ready(function(){
dropdownOpen(); }); function dropdownOpen() { var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
$(this).addClass('open'); }).mouseout(function() { $(this).removeClass('open'); }); } | |
添加脚本替换后可以实现鼠标悬停菜单下拉效果。
第二、实现主导航可点击打开
| 代码如下 | 复制代码 |
|
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api'); }); | |
添加脚本到
bootstrap.js文件中，可以实现主导航的可点击打开。总结，这样我们的Bootstrap菜单导航可以实现鼠标悬停展开，以及主导航的点击打开。
相关文章
- jm天堂网页版官方登录入口-jm天堂网页版直接登录入口 12-14
- 蝉妈妈网页版直达入口-蝉妈妈app官方正版入口在哪 12-14
- 豆包AI智能在线网页解析神器-豆包AI智能在线会议纪要生成助手 12-14
- 小红书Web官网登录入口-小红书官方网页版一键登录 12-14
- 苍云阅读app如何快速找到目录-目录入口位置 12-14
- 苹果ID登录官网入口 - 苹果Apple ID账户登录页面一键直达 12-14