bootstrap搜索框：click下拉展开改hover展开（两种代码）

问题：

实现顶部导航的鼠标悬停下拉展开的效果；

实现的滚不导航区域：搜索框组件之点击下拉展开变更为鼠标悬停展开下拉选项条件的效果；

解决 2 中所述悬停后，鼠标下移选择时，菜单折叠消失的问题；

代码块 · 效果 · 截图 · 对比：

代码1 ：
代码 2：

主要代码 · 示下：

<div class="form-inline my-2 my-lg-0"><!-- 搜索框 -->                                    <div class="input-group search-wrap hoverdrop"><div class="input-group-prepend"><!--代码1--><!--<a class="nav-link font14 dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全站</a><div class="dropdown-menu shadow border-0" aria-labelledby="navbarDropdown2" style="left: ;width:;"><a class="dropdown-item font14" href="">海报</a><a class="dropdown-item font14" href="">文档</a></div>--><!--代码2--><button class="btn  dropdown-toggle font14 search-style" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全站</button><div class="dropdown-menu shadow border-0" style="min-width: 104px;top: 35px;"><a class="dropdown-item font14" href="#">海报</a><a class="dropdown-item font14" href="#">文档</a></div></div><input type="text" class="form-control search-style font14" id="input-search" placeholder="请输入" aria-label="请输入商品名称" aria-describedby="button-search"><div class="input-group-append">                                           <button class="btn btn-light iconfont iconsousuo search-style font14" type="submit" id="button-search"><!-- 搜索 --></button></div></div><!-- 用户头像 --><a class="nav-link user-header-pic" href="#"><icon class="iconfont iconhuiyuanzhongxin font32"></icon></a><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link font14" href="#">登录 <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link font14" href="#">注册</a></li></ul>
</div>

主要代码 · css定义：


/*悬停下拉导航设置*/
/*.navbar .hoverdrop > li .dropdown-menu {margin: 0;}
.navbar .hoverdrop > li:hover .dropdown-menu {display: block;}*//*搜索框下拉选择设置*/
.search-wrap.hoverdrop > .input-group-prepend:hover .dropdown-menu {display: block;}

重要声明 · 注意说明：

注意css定义的类.search-wrap
.search-wrap.hoverdrop > .input-group-prepend:hover .dropdown-menu {display: block;}
注意代码1、代码2的效果对比研究；
代码2 样式绑定.search-style
.search-style{background-color: #f3f4f9;border-color: #f3f4f9;height: 42px;}
代码中top: 35px;定义是为了解决文章中的问题3；

以上就是关于“bootstrap搜索框：click下拉展开改hover展开（两种代码）”的全部内容。

bootstrap搜索框：click下拉展开改hover展开（两种代码）相关推荐

免费资源下载：暗色色系的超棒搜索框和下拉菜单UI欣赏
为什么80%的码农都做不了架构师?>>> 日期:2012-7-5 来源:GBin1.com 在今天的免费素材下载中,我们推荐来自法国的UI设计师Alexandra Nuad的 ...
使用jQuery-UI来实现一个Ajax的自动完成功能（自动填充搜索框的下拉值）
首先你要在.net拓展包中去搜索 jquery ui (Combined Libray)安装这么个文件第二部在控制器中添加我们根据输入搜索框的值获取符合的记录集的action 第三步有了 ...
仿百度搜索框自动下拉提示
摘自 https://www.cnblogs.com/kingshing/p/7389299.html 转载于:https://www.cnblogs.com/JonMingrev/p/1015380 ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码
利用jQuery实现可输入搜索文字的下拉框先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...
html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
html点击文字下拉,利用jQuery实现可输入搜索文字的下拉框
先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var $xialaSELECT; $(docum ...
Bootstrap完美select标签下拉菜单实现
Bootstrap <select>下拉菜单实现初级者使用bootstrap框架时,大部分对官方提供的下拉菜单dropdown组件不是很感冒! 所以,这里就提供简单原生下拉标签<s ...
Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns
Bootstrap v3′s navigation has menus toggle enabled by default - you have to click to have them open/ ...

bootstrap搜索框：click下拉展开改hover展开（两种代码）

bootstrap搜索框：click下拉展开改hover展开（两种代码）

问题：

代码块 · 效果 · 截图 · 对比：

主要代码 · 示下：

主要代码 · css定义：

重要声明 · 注意说明：

bootstrap搜索框：click下拉展开改hover展开（两种代码）相关推荐

最新文章

热门文章