您的当前位置:首页正文

bootstrap下拉菜单点击立即隐藏改如何解决

2023-12-01 来源:91汽车资讯网
本篇文章主要介绍了解决bootstrap下拉菜单点击立即隐藏bug的方法,具有一定的参考价值,有兴趣的可以了解一下

昨天用jQuery和bootstrap实现下拉菜单复选框,今天把做好的demo组合进项目里,发现有点bug,就是点击银行复选框的时候,每点一次dropdown-menu这个p会立即隐藏,这就导致每次只能选一个。

这应该是事件传播的原因,代码修改如下:

另外,需要新增加的功能是,点击“保存”按钮的时候,需要把选中的银行名称以逗号拼接成字符串传递给后台。这部分比较简单,代码如下:

小编还为您整理了以下内容,可能对您也有帮助:

bootstrap点击空白处下拉菜单关闭?

就是找出空白地方的dom元素,然后给这个dom元素添加一个点击事件用来关闭下拉菜单就可以了!

bootstrap点击空白处下拉菜单关闭?

就是找出空白地方的dom元素,然后给这个dom元素添加一个点击事件用来关闭下拉菜单就可以了!

bootstrap怎么设置下拉菜单不点击,改成鼠标悬停直接显示下拉菜单

Bootstrap的下拉菜单一直都是需要点击,才会显示出来,可能不太符合大家的使用习惯,可能有的用户都不知道这个可以点击,国外的一个开发者写了一个插件,能将点击事件切换为Hover鼠标悬停事件,这样节约了用户的操作和时间。

Bootstrap Hover Dropdown是一个非官方的Bootstrap插件,使Bootstrap下拉菜单激活悬停和提供更好的用户体验,当前版本支持最新版的Bootstrap 3,所以不必担心使用兼容的问题。
安装方法

可以下载并解压缩下载包从GitHub。或者,可以下载文件通过鲍尔(JavaScript的包管理系统):

这也将自动安装Bootstrap和jQuery插件,如果需要。
一旦已经下载的文件,在代码文件最后引入Bootstrap的js文件(S)即可:
<!-- script order matters! -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>
使用方法
就像使用Bootstrap一样,可以激活它,没有任何的JavaScript,只要添加一个数据属性,可以让它自动工作。
添加data-hover="dropdown"到标签中,如果已经使用Bootstrap,可以替换Bootstrap的data-toggle="dropdown"。
可以通过数据属性设置选项,也可以通过data-delay和data-close-others来设置选项。这是一个标准的例子:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
</li>
或者,可以通过JavaScript初始化:
$('.dropdown-toggle').dropdownHover(options);
这没有任何其他配置自启动已经支持此功能菜单也可以。只使用以前使用的标记。只有顶部的标签需要任何特殊标记为我的插件工作。
可选参数
delay: (可选参数) 在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目,激活它。默认值 500。
instantlyCloseOthers: (可选参数) 一个布尔值,如果为真,将立即关闭所有其他下拉菜单的使用当您启动一个新的选择器匹配导航。当你有这么近,可以重叠的很好。 默认值 true。
hoverDelay: (可选参数) 开幕前在毫秒的延迟。有些人认为这提高了用户体验,因为它减少了意外的菜单口数量。默认值 0。

bootstrap怎么设置下拉菜单不点击,改成鼠标悬停直接显示下拉菜单

Bootstrap的下拉菜单一直都是需要点击,才会显示出来,可能不太符合大家的使用习惯,可能有的用户都不知道这个可以点击,国外的一个开发者写了一个插件,能将点击事件切换为Hover鼠标悬停事件,这样节约了用户的操作和时间。

Bootstrap Hover Dropdown是一个非官方的Bootstrap插件,使Bootstrap下拉菜单激活悬停和提供更好的用户体验,当前版本支持最新版的Bootstrap 3,所以不必担心使用兼容的问题。
安装方法

可以下载并解压缩下载包从GitHub。或者,可以下载文件通过鲍尔(JavaScript的包管理系统):

这也将自动安装Bootstrap和jQuery插件,如果需要。
一旦已经下载的文件,在代码文件最后引入Bootstrap的js文件(S)即可:
<!-- script order matters! -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>
使用方法
就像使用Bootstrap一样,可以激活它,没有任何的JavaScript,只要添加一个数据属性,可以让它自动工作。
添加data-hover="dropdown"到标签中,如果已经使用Bootstrap,可以替换Bootstrap的data-toggle="dropdown"。
可以通过数据属性设置选项,也可以通过data-delay和data-close-others来设置选项。这是一个标准的例子:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
</li>
或者,可以通过JavaScript初始化:
$('.dropdown-toggle').dropdownHover(options);
这没有任何其他配置自启动已经支持此功能菜单也可以。只使用以前使用的标记。只有顶部的标签需要任何特殊标记为我的插件工作。
可选参数
delay: (可选参数) 在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目,激活它。默认值 500。
instantlyCloseOthers: (可选参数) 一个布尔值,如果为真,将立即关闭所有其他下拉菜单的使用当您启动一个新的选择器匹配导航。当你有这么近,可以重叠的很好。 默认值 true。
hoverDelay: (可选参数) 开幕前在毫秒的延迟。有些人认为这提高了用户体验,因为它减少了意外的菜单口数量。默认值 0。

我用bootstrap做的按钮下拉菜单,点击不出现下拉菜单是怎么回事,求指教

    检查一下你是否引入jquery文件

    如果已引入,看看是否版本过低(我之前也是这个问题,我换了高版本的jquery就好了)

bootstrap 下拉菜单显示不出来

以下代码测试通过,对容器的class添加dropdown,使得菜单可出现在其下方

<!doctype html>

<html>

<head>

   <meta charset="utf-8">

   <title>bootstrap测试</title>

   <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

   <link href="http://cdn.bootcss.com/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />

</head>

<body>

   <div class="container dropdown" style="margin-bottom: 50px">

       <h2 class="page-header">

           下拉菜单</h2>

       <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">字体<span class="caret"></span></a>

       <ul class="dropdown-menu">

           <li><a href="#">宋体</a></li>

           <li><a href="#">黑体</a></li>

           <li><a href="#">楷体</a></li>

       </ul>

   </div>

   <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

   <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

91汽车资讯网还为您提供以下相关内容希望对您有帮助:

bootstrap中下拉菜单(dropdown)的问题

当使用方法去触发时,其中 dropdown('toggle') 和想象中的不一样,只能触发显示,不能隐藏,并且位置还有所偏移。。所以,我用了jQuery方法中的 toggle();也能正常。。但是,dropdown身上的一些事件用不了。。比如:

bootstrap 导航条下拉菜单点击无反应?

还没有解决的话,继续第二步:初始化下拉菜单,页面加入以下js代码 (function () { // 解决bootstrap下拉菜单第一次点击无反应问题 ('.dropdown-toggle').dropdown();}); 原文链接:https://blog.csdn.net/qq_289889...

bootstrap怎么设置下拉菜单不点击,改成鼠标悬停直接显示下拉菜单

delay: (可选参数) 在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目,激活它。默认值 500。instantlyCloseOthers: (可选参数) 一个布尔值,如果为真,将立即关闭所有其他下拉菜单的使用当您...

bootstrap下拉菜单如何设置当鼠标移出时自动隐藏下拉菜单

实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css:.nav &gt; li:hover .dropdown-menu {display:block;} 这句css加在bootstrap.min.css之后出现的css中,你试下!

我用bootstrap做的按钮下拉菜单,点击不出现下拉菜单是怎么回事,求指教...

检查一下你是否引入jquery文件 如果已引入,看看是否版本过低(我之前也是这个问题,我换了高版本的jquery就好了)

bootstrap 下拉菜单显示不出来

以下代码测试通过,对容器的class添加dropdown,使得菜单可出现在其下方 &lt;!doctype html&gt; bootstrap测试

bootstrap 导航条怎么做成当屏幕宽度不够时隐藏部分菜单

blue;} } 这段代码的意思就是 当屏幕的最大宽度不超过300的时候 背景为蓝色,用这种方法可以实现你的效果,也就是当屏幕宽度为多少的时候 你可以设置部分菜单display:none;具体的方法你可以查一下 媒体查询 ...

Bootstrap点击一个输入框(data-toggle="modal" data-target=“id”)然 ...

解决方案如下:function moveCaretToEnd(el) { if (typeof el.selectionStart == "number") { el.selectionStart = el.selectionEnd = el.value.length;} else if (typeof el.createTextRange != "undefined") ...

在线等! bootstrap下拉菜单弹不出来

Bootstrap的动态效果,需要再引入bootstrap.js,而且它依赖于jQuery.js。

如何用bootstrap定义上弹菜单

使用方法正如前面所示,只需要在“btn-group”上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可)。bootstrap下拉菜单智能向上下弹出1、需求:通过给bootstrap下拉...

Top