jQuery写下拉菜单

最新推荐文章于 2019-08-15 10:15:45 发布

cc果冻LXY

最新推荐文章于 2019-08-15 10:15:45 发布

阅读量196

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_44538675/article/details/87598288

版权

jquery 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<style text/css>
	    *{padding: 0;margin: 0;}
	    li{list-style: none;}
	    div{width: 200px;height: 30px;position: relative;margin: 0 auto;}
	    .txt{display: block;width: 200px;height: 30px;}
	    .list{width: 200px;height: 306px;border: 1px solid blue;
                    display: none;position: absolute;}
	    .list li{height: 50px;border-bottom: 1px solid #ccc;ine-height: 50px;}
        </style>
        <script src="js/jquery-1.11.0.js"></script>
    </head>
    <body>
        <div>
	    <input type="text" class="txt" placeholder="请输入文字"/>
	    <ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	    </ul>
	</div>
	<script>
            $(function(){
		$(".txt").on("click",function(){
		    $(".list").css("display","block")
		})
		$(".list li").click(function(){
		    var val = $(this).html();
		    $(".txt").val(val)
		    $(".list").css("display","none")
		})
            })
	</script>
    </body>
</html>

cc果冻LXY

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery写下拉菜单

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&lt;/title&gt; &lt;style text/css&gt; *{padding: 0;margin: 0;} li{list-style:
复制链接

扫一扫

专栏目录