Bootstrap导航条可点击和鼠标悬停显示下拉菜单_bootstrapulli菜单自适应

Bootstrap

下拉菜单

31 浏览量更新于2023-05-15 评论收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Bootstrap导航条可点击和鼠标悬停显示下拉菜单导航条可点击和鼠标悬停显示下拉菜单

主要为大家详细介绍了Bootstrap导航条可点击和鼠标悬停显示下拉菜单,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，

也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~

首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个JQuery插

件，在dropdown代码段中找到了关键的几句：

// APPLY TO STANDARD DROPDOWN ELEMENTS

// ===================================

$(document)

.on('click.bs.dropdown.data-api', clearMenus)

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

.on('click.bs.dropdown.data-api' , toggle, Dropdown.prototype.toggle)

.on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

找到几句关键代码后，想到了解决办法，只要把其中click.bs.dropdown.data-api事件关闭就OK了，代码如下：

$(document).ready(function(){

$(document).off('click.bs.dropdown.data-api');

});

以上代码测试有效，导航条可点击问题解决，下面解决鼠标悬停弹下拉菜单问题，这个相对简单些，用JQuery的鼠标事件就可实现，代码如下：

$(document).ready(function(){

dropdownOpen();//调用

});

/**

* 鼠标划过就展开子菜单，免得需要点击才能展开

function dropdownOpen() {

var $dropdownLi = $('li.dropdown');

$dropdownLi.mouseover(function() {

$(this).addClass('open');

}).mouseout(function() {

$(this).removeClass('open');

});

}

小编再为大家分享一个例子：bootstrap实现鼠标悬停自动打开下拉列表框实现鼠标悬停自动打开下拉列表框

Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标

hover时就弹出二级菜单。

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap导航条鼠标悬停下拉菜单</title>

</head>

<body>

<h1>Bootstrap导航条鼠标悬停下拉菜单</h1>

<p>Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。</p>

</ul>

</li>

</ul>

</div>

</body>

</html>

需要添加的CSS样式如下：

.navbar .nav > li .dropdown-menu {

margin: 0;

}

.navbar .nav > li:hover .dropdown-menu {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38625192

粉丝: 4
资源: 943

会员权益专享

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

评论0

会员权益专享

最新资源

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

评论0

jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

jquery鼠标悬停滑动下拉菜单代码.zip

jquery鼠标悬停滑动下拉导航菜单效果.zip

使用Bootstrap实现多级菜单和下拉菜单

创建响应式树状菜单：使用Bootstrap 3中的下拉菜单

bootstrap导航栏下拉菜单实现图片大中小效果

bootstrap导航栏下拉菜单实现放大中等放小效果

bootstrap 5 dropdown hover

bootstrap左侧导航栏下拉菜单

bootstrap导航栏下划菜单

如何用bootstrap实现导航栏下拉菜单

用bootstrap写导航栏下拉菜单

bootstrap 多选下拉菜单

bootstrap5如何使用下拉菜单

bootstrap导航条前方黄点

bootstrap导航菜单

bootstrap导航栏下拉菜单大小设置

下拉菜单的前端设计思路

bootstrap 下拉菜单

bootstrap中带有输入框的下拉菜单有吗

会员权益专享

最新资源