监听input的值显示下拉菜单

àì夳堔傛蜴生んèń 2022-05-18 06:06 226阅读 0赞

用jQuery手写一波下拉菜单，虽然jQuery的hover方法提供了下拉菜单的方法，但是为了避免各式各样想不到的BUG，

决定还是手写一波。

下面介绍代码：

使用的语言：html，css，JavaScript，jQuery。

实现效果 ![70][]

**html 部分：**

<div style="color: #323232; ">
    		查找：
    				<input id="fileField_chazhao" type="text"/>
    				<ul id="fileField_ul" style="display:none;z-index: 2;">
                                        <li>这里加自己想写的</li>
    				</ul>
    			</div>

先给ul添加display:none将ul 隐藏，内容根据需求自定义~

然后就开始监听input输入框，确认有值显示u；

**JS代码如下:**

document.getElementById("fileField_chazhao").oninput=function(){
    				    //oninput方法监听input的值
                                var val = $(this).val()
    	        		//当val不为空的时候 将ul显示出来
                                    if(val!=""){
    			            $("#fileField_ul").css("display","block")
    							
    				}else{
    					$("#fileField_ul").css("display","none")
    				}
    				
    					
    				}

这样就达到了监听input的值显示下拉菜单的效果。

当然，只控制input的值才能隐藏ul是会让我们非常不便利，所以可以给body添加一个点击事件

$("body").click(function(){
    				$("#fileField_ul").css("display","none")
    			})

好啦，这样就完美多了

[70]: /images/20220518/abe85d7e4725438aaf075e3a3bf69e03.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关下拉菜单

![在这里插入图片描述][20200614163018558.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

ゝ一世哀愁。/ 2023年02月17日 14:30/ 0 赞/ 243 阅读

相关 php下拉菜单显示不同值,如何在php下拉列表中显示特定值？

![385ML.png][] 当我点击编辑按钮时,它应该进入编辑页面 ![7NSHW.png][] 当我想在下拉菜单中使用coursename =“php”编辑行时,课程

淡淡的烟草味﹌/ 2023年01月16日 03:21/ 0 赞/ 189 阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 420 阅读

相关 html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单

个人信息维护学生信息修改修改密码\--%> 修改密码\--%> 修改密码--%> 退出登录用户：

傷城~/ 2022年10月05日 13:57/ 0 赞/ 370 阅读

相关点击input出现下拉树菜单

[下载地址][Link 1] 原生js实现可多选的下拉树选项，无须引用第三方插件不要引入jQuery ![1631560630.png][] dd: [Link 1]

布满荆棘的人生/ 2022年09月13日 05:22/ 0 赞/ 202 阅读

相关使用定时器显示下拉菜单

html布局：首排导航和下拉的内容分成两个div写。 <div class="nav"> <ul class="menu">

曾经终败给现在/ 2022年08月07日 00:16/ 0 赞/ 193 阅读

相关下拉菜单

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

港控/mmm°/ 2022年06月18日 10:51/ 0 赞/ 359 阅读

相关 js获取下拉菜单的值

现在有一id=test的下拉框，怎么拿到选中的那个值呢？分别使用javascript原生的方法和jquery方法 <select id="test" name="">

末蓝、/ 2022年06月12日 23:47/ 0 赞/ 222 阅读

相关监听input的值显示下拉菜单

用jQuery手写一波下拉菜单，虽然jQuery的hover方法提供了下拉菜单的方法，但是为了避免各式各样想不到的BUG，决定还是手写一波。下面介绍代码：使用的语言

àì夳堔傛蜴生んèń/ 2022年05月18日 06:06/ 0 赞/ 227 阅读

相关【下拉菜单】随前一个下拉菜单内容变化而变化的下拉菜单

`` <body> <form id="form1" runat="server" method="post"> <!--省份下拉菜单

淡淡的烟草味﹌/ 2021年09月26日 00:42/ 0 赞/ 499 阅读