文本框如何实现下拉菜单

1、第一步，点击打开html编辑器sublimeText，如下图

2、第二步，代码编写一个静态界面，一个文本框input和一个下拉菜单样式div，

<div class="content">

    <div class="select">

        <input type="text" value="所有选项">

            <ul>

            <li data-value="所有选项" class="selected">所有选</li>

                <li data-value="百度">百度</li>

                <li data-value="百度2">百度2</li>

                <li data-value="百度3">百度3</li>

                <li data-value="百度4">百度4</li>

            </ul>

        </div>

    </div>

如下图

3、第三步，下面试添加样式后静态文本框和下拉菜单的样子显示，如下图

4、第四步，给文本框添加点击事件之前先引入第三方库jquery，如下图

5、第五步，给文本框添加点击事件，点击出现下拉框，再点击关闭下拉框，实现下拉菜单功能，代码如下图

6、第六步，下拉框功能实现，下面是收起和下拉的图片，如下图