Bootstrap 4 Dropdown 鼠标点击改为鼠标悬停触发菜单

最新推荐文章于 2024-08-12 08:31:07 发布
最新推荐文章于 2024-08-12 08:31:07 发布
阅读量2.4k 收藏 5
点赞数 3
分类专栏： Bootstrap 文章标签： bootstrap css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anning4877/article/details/104451032
版权
本文介绍了如何将Bootstrap 4的Dropdown菜单默认的点击展开方式改为鼠标悬停即展开。针对导航栏中的二级菜单，通过修改CSS，特别是应用`mt-0`样式消除顶级菜单与子菜单之间的空隙问题，从而实现更友好的用户体验。
摘要由CSDN通过智能技术生成

Bootstrap 4 导航栏(navbar)，支持二级菜单，由 Dropdown 实现，但默认为单击事件展开二级菜单，但很多需求是鼠标悬浮就需要展开子菜单。下面是方案：

CSS

.dropdown:hover>.dropdown-menu {
   
    display: block;
}

.dropdown>.dropdown-toggle:active {
   
    pointer-events: none;
}

有个小 Bug 顶级菜单和子菜单之间有一点空隙，鼠标移动到空隙后菜单就隐藏了。我们再修改 dropdown-menu 的样式，加一个
mt-0 的样式就没有空隙了。

HTML


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  长春非常安宁
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

				
			

			

				

					09-01
				

			

		

		

			
				
总之，通过利用Bootstrap的可扩展性以及社区提供的插件，我们可以轻松地将Dropdown下拉菜单的触发方式从点击更改为鼠标悬停，以适应不同用户的需求和交互习惯。在实际开发中，应始终关注用户体验并适时优化这些细节...

			
		

	



                

              
                



	

		

			

				
					
Bootstrap——将菜单改为鼠标滑过（bootstrap-dropdown-hover插件）

				
			

			

				

					mintsolace的博客
				

				

					09-20
					
					1237
					
				

			

		

		

			
				
官网：bootstrap-hover-dropdown
人生有限公司
<ul class="nav navbar-nav navbar-right">
<!-- 按钮1 -->
	<div class="btn-group">
		<button type="button" class="btn btn-default dropdown-toggle" d...

			
		

	



                


  
              

                


	

		

			

				
					
5.4 Bootstrap 下拉菜单(Dropdown)插件

				
			

			

				

					梁辰兴的博客
				

				

					07-23
					
					856
					
				

			

		

		

			
				
Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

			
		

	





	

		

			

				
					
Bootstrap Hover Dropdown 教程

					
最新发布

				
			

			

				

					gitblog_00650的博客
				

				

					08-12
					
					360
					
				

			

		

		

			
				
Bootstrap Hover Dropdown 教程
 bootstrap-hover-dropdown项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-hover-dropdown 项目介绍
bootstrap-hover-dropdown 是一个开源的 JavaScript 插件，旨在为 Bootstrap 框架添加悬停功能，使得下拉菜单在用...

			
		

	



		

			
		



	

		

			

				
					
Bootstrap 下拉菜单dropdown、按钮组btn-group、导航元素nav、导航栏navbar

				
			

			

				

					喜欢文学的程序员
				

				

					07-31
					
					5150
					
				

			

		

		

			
				
最近Bootstrap有点让我糊涂，在使用过程中，下拉菜单(dropdown)、按钮组(btn-group)、导航元素(nav)、导航栏(navbar)容易混淆，遂用闲暇时间琢磨琢磨（本文基于Bootstrap3）。

这几者个人理解有点递进的意思：

下拉菜单(dropdown)可以用在后3个中，组合起来可以称呼为：“按钮下拉菜单”或“导航下拉菜单”；

按钮与导航之间没有“合作使用”价值，所以...

			
		

	





	

		

			

				
					
Bootstrap下拉框事件

				
			

			

				

					huangbaokang的博客
				

				

					10-10
					
					1523
					
				

			

		

		

			
				
Bootstrap提供各种附加到下拉插件的事件，分别是：
show.bs.dropdown：当手柄被点击时触发；或下拉手柄收到打开隐藏菜单的请求
shown.bs.dropdown：在菜单显示后触发
hide.bs.dropdown：在关闭菜单之前触发
hidden.bs.dropdown：当菜单关闭时触发
举例：

$('a[data-toggle="tab"]').on(
    'shown...

			
		

	





	

		

			

				
					
Bootstrap从入门到实战---点击提示和悬停提示

				
			

			

				

					Season CSDN博客
				

				

					07-07
					
					907
					
				

			

		

		

			
				
Bootstrap从入门到实战—点击提示和悬停提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrin

			
		

	





	

		

			

				
					
bootstrap TAB选项卡鼠标经过滑动门效果

				
			

			

				

					t1159385790的专栏
				

				

					05-21
					
					7988
					
				

			

		

		

			
				
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Brea

			
		

	





	

		

			

				
					
Bootstrap下拉菜单更改为悬停(hover)触发的方法

				
			

			

				

					08-30
				

			

		

		

			
				
默认情况下，Bootstrap下拉菜单需要通过点击来触发，但是在某些场景下，悬停触发可能是更好的选择。  悬停触发可以减少一步操作，提高用户体验，因此在管理系统的开发过程中，使用悬停代替点击是一种很好的实践。...

			
		

	





	

		

			

				
					
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

				
			

			

				

					09-02
				

			

		

		

			
				
`dropdownOpen`函数将遍历所有包含下拉菜单的`<li>`元素，并在鼠标悬停时添加`open`类，这将触发Bootstrap的下拉菜单显示。当鼠标离开时，移除`open`类，下拉菜单就会隐藏。这样，我们就实现了在鼠标悬停时显示下拉...

			
		

	





	

		

			

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

				
			

			

				

					11-28
				

			

		

		

			
				
在`bootstrap.js`文件中，下拉菜单的逻辑被封装在名为`Dropdown`的JQuery插件内。特别是`click.bs.dropdown.data-api`事件，这个事件阻止了导航链接的默认行为。要允许点击导航条同时执行链接跳转和显示下拉菜单，...

			
		

	





	

		

			

				
					
取消Bootstrap的dropdown-menu点击默认关闭事件方法

				
			

			

				

					10-18
				

			

		

		

			
				
今天小编就为大家分享一篇取消Bootstrap的dropdown-menu点击默认关闭事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
BootStrap实现鼠标悬停下拉列表功能

				
			

			

				

					08-31
				

			

		

		

			
				
请注意，Bootstrap 默认的交互是点击触发下拉菜单，但通过修改 JavaScript 代码，我们可以改变这种行为，使其在鼠标悬停时显示下拉列表。这种方法对于某些场景可能更合适，例如，当用户在小屏幕上使用触摸设备时，...

			
		

	





	

		

			

				
					
Bootstrap5导航条鼠标悬停下拉菜单

				
			

			

				

					GLyihu的博客
				

				

					09-14
					
					1799
					
				

			

		

		

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

效果图：



直接上代码，非常简单，加了个css样式：


.dropdown:hover .dropdown-menu {
    display: block;
}

个人亲测有效。希望能帮助到大家。
...

			
		

	





	

		

			

				
					
Bootstrap鼠标悬停下拉导航总结

				
			

			

				

					草巾冒小子的博客
				

				

					08-22
					
					4500
					
				

			

		

		

			
				
Bootstrap鼠标悬停下拉导航总结

以bootstrap.js未压缩版本V3.3.7为例。 
Bootstrap的导航条为适应移动设备，都是click弹出二级下拉菜单，没有鼠标hover的特效； 
所以为了实现鼠标hover弹出下拉菜单，提升网站用户体验和满足一般网站特效需求，将直接改动bootstrap的源码。



源码修改

找到下图，第908~913行： 


修改为：

  $(d...

			
		

	





	

		

			

				
					
bootstrap --- > 鼠标停留提示事件

				
			

			

				

					栗子好好吃的博客
				

				

					04-09
					
					2593
					
				

			

		

		

			
				
使用bootstrap可以很简单的实现鼠标停留,提示的效果


<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right" class="btn btn-primary">工具提示</a>

data-toggle=“tooltip”:代表了提示类
data-placem...

			
		

	





	

		

			

				
					
Bootstrap—鼠标悬停提示

				
			

			

				

					zorojas的博客
				

				

					03-27
					
					1563
					
				

			

		

		

			
				
鼠标悬停


   $(function () { $("[data-toggle='tooltip']").tooltip(); });



data-toggle="tooltip" data-placement="left" 左侧提示

data-toggle="tooltip" data-placement="right" 右侧提示

data-toggle="toolti

			
		

	





	

		

			

				
					
[element-ui] el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式

				
			

			

				

					qq_14993591的博客
				

				

					04-07
					
					988
					
				

			

		

		

			
				
如果我们再点击肉夹馍，我们会发现，打印出来的e的内容中的disabled的值就位true，所以发现规律了，就可以做控制了。即为：只有当e.disabled的值为false的时候（说明未被禁用），那么我们才在对应的回调中做相关的事情，否则就忽略。当然，如果自定义了command参数，也可以尝试接一下e，比如。鼠标移入出现禁用样式，如下图，就是我们想要的效果。

			
		

	





	

		

			

				
					
Element Plus修改table表格鼠标悬停颜色和选中颜色

				
			

			

				

					weixin_45852687的博客
				

				

					12-01
					
					3044
					
				

			

		

		

			
				
Elementplus  修改表格鼠标悬停和选中颜色

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值