jquery 消除冒泡实现选项框效果

最新推荐文章于 2022-07-11 10:29:03 发布

记忆向前看

最新推荐文章于 2022-07-11 10:29:03 发布

阅读量371

点赞数

CC 4.0 BY-SA版权

文章标签：列表选择消除jquery事件冒泡

本文链接：https://blog.youkuaiyun.com/gangzai626919/article/details/45191103

本文探讨了在HTML页面中实现动态下拉菜单的技术细节，包括事件监听和DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
		*{margin:0px;padding:0px;}
		input{width:300px;height:28px;border:1px solid #ccc;border-radius:4px;}
		div{width:300px;margin:60px auto;position:relative;}
		ul{display:none;width:100%;list-style:none;position:absolute;top:32px;border:1px solid #ccc;}
		ul li{height:30px;border-bottom:1px solid #ccc;line-height:30px;}
		ul li:last-child{ border-bottom:none; }
  </style>
  <script src = "jquery-1.4.2.min.js"   type="text/javascript"></script>
  <script   type="text/javascript">
		$(function(){
			$("input").bind("click",function(event){
			    event.stopPropagation();
				$("ul").show();
			});
			$("ul li").bind("click",function(event){
				event.stopPropagation();
				$("input")[0].value = $(this).text();
				$("ul").hide();
			});
			$(document).bind("click",function(event){
				$("ul").hide();
			});
		});
  </script>
 </head>

 <body>
	<div>
		<input type = "text" />
		<ul>
			<li>选项一</li>
			<li>选项二</li>
		</ul>
	<div>
 </body>
</html>