模拟selelct下拉菜单（搜索框简易版）

系统管理员 2021-12-24 05:19 236阅读 0赞

## 模拟selelct下拉菜单（可用于搜索框） ##

// 点击 span 显示 列表 ul  
// 点击文档 document ,隐藏 列表ul  
// 点击每一个li ， 将当前li的 内容 显示到 span中

**效果展示**：  
![效果展示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

<body>
    	<div id="search">       //相对定位
    		<div class="box">
    			<form>
    				<span id="select" class="select">请选择游戏名称</span>
    				<a href="javascript:;">搜索</a>
    			</form>
    		</div>
    		<ul id="sub" class="sub">   //绝对定位
    			<li>地下城与勇士</li>
    			<li>魔兽世界（国服）</li>
    			<li>魔兽世界（台服）</li>
    			<li>热血江湖</li>
    			<li>大话西游II</li>
    			<li>QQ幻想世界</li>
    		</ul>
    	</div>
    </body>

//js代码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211223/6dfd5b2add0847719aa298cfab43db79.png