<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .link-box{

            position: relative;

            margin-left: 14px;

            width:365px;

            height:37px;

            border:1px solid #cccccc;

            -webkit-border-radius: 3px;

            -moz-border-radius: 3px;

            border-radius: 3px;

            background-color: #fff;

        }

        .cur-link{

            float:left;

            width:318px;

            height:37px;

            line-height: 37px;

            color:#cccccc;

            text-indent: 120px;

        }

        .link-list{

            display: none;

            position: absolute;

            left:0;

            top:37px;

            width:317px;

            border:1px solid #cccccc;

            overflow: hidden;

        }

        .link-list li{

            width:316px;

            height:37px;

            line-height: 37px;

            text-indent: 120px;

            background-color: #fff;

        }

        .link-list li a{

            text-decoration: none;

            color:#cccccc;

        }

        .arrow-btn{

            cursor: pointer;

            float:left;

            display: block;

            width:43px;

            height:37px;

            border-left:1px solid #cccccc;

            background: url(../img/arrow-btn.png) no-repeat center center;

        }

    </style>

    <script src="./js/jquery-1.11.3.min.js"></script>

</head>

<body>

   <div class="link-box">

       <div class="cur-link">更多链接</div>

       <ul class="link-list">

           <li><a href="javascript:void(0)">更多链接1</a></li>

           <li><a href="javascript:void(0)">更多链接2</a></li>

           <li><a href="javascript:void(0)">更多链接3</a></li>

       </ul>

       <span class="arrow-btn"></span>

   </div>

   <script>

       $(function(){

           var listLength = $(".link-list li").length * 37;

           $(".link-list").hide();

           $(".arrow-btn").click(function(e){

               $(".link-list").slideToggle(500);

               $(document).one("click", function(){

                   $(".link-list").hide();

               });

               e.stopPropagation();

           });

           $(".link-list li").click(function(e){

               var curText = $(this).find('a').text();

               $(".cur-link").html(curText);

               $(".link-list").hide();

               e.stopPropagation();

           });

       })

   </script>

</body>

</html>

注意：如果要实现点击a后其内容显示在select框内，需要禁止a标签的自动跳转

模拟select框的更多相关文章

  1. 模拟select样式，自定义下拉列表为树结构

    效果图如下: 首先,需要用到的库jQuery,zTree(官网API:http://www.treejs.cn/v3/api.php) 注意:因为zTree是基于jQuery的,所以应该先引入jQue ...

  2. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  3. ul -- li 模拟select下拉框

    在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...

  4. div 模拟<select>事件

    IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...

  5. Selenium(七)：选择框(radio框、checkbox框、select框)

    1. 选择框 本章使用的html代码: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. layui问题之模拟select点击事件

    一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即 ...

  7. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  8. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  9. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. UVALive 4794 Sharing Chocolate（状压，枚举子集）

    n的规模可以状压,f[x][y][S]表示x行,y列,S集合的巧克力能否被切割. 预处理出每个状态S对应的面积和sum(S),对于一个合法的状态一定满足x*y=sum(S),实际上只有两个变量是独立的 ...

  2. 3. Netbackup 7.6客户端的安装（windows/linux）

    1 客户端的安装 1.1 Windows客户端安装 1.1.1 客户端hosts修改 windows xp/2003/vista/2008/7/8用户HOSTS文件是在“c:\windows\syst ...

  3. [神经网络]一步一步使用Mobile-Net完成视觉识别（三）

    1.环境配置 2.数据集获取 3.训练集获取 4.训练 5.调用测试训练结果 6.代码讲解 本文是第三篇,获取tfboard训练集. 前面我们拿到了所有图片对应的标注信息的xml文件,现在我们需要先把 ...

  4. JS给数字加千位分隔符

    本文原链接:https://www.jianshu.com/p/928c68f92c0c JavaScript实现千位分隔符 将普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题,千位分 ...

  5. 设置DdtaGridView控件中网格线的样式

    实现效果: 知识运用: DataGridView控件的GridColor属性 //用来获取或设置网格线的颜色 public Color GridColor { get; set; } //属性值: C ...

  6. HTML5<section>元素

    HTML5<section>元素用来定义页面文档中的逻辑区域或内容的整合(section,区域),比如章节.页眉.页脚或文档中的其他部分. 根据W3C HTML5文档中:section里面 ...

  7. MySQL 自学笔记_Union(组合查询)

    1. Union查询简介 组合查询:有时在使用select语句进行数据查询时,想要将多个select语句在一个查询结果中输出,此时就需要使用Union关键字. Union的使用方法:用union将多个 ...

  8. 08GNU as汇编

    1. 概述 ​ 由于操作系统许多关键代码要求有很高的执行速度和效率,因此在一个操作系统源代码中通常就会包含大约 10% 左右的起关键作用的汇编语言程序量.Linux 操作系统也不例外,它的 32 位初 ...

  9. python爬虫基础09-selenium大全3/8-Remote Webdriver

    Selenium笔记(3)Remote Webdriver 本文集链接:https://www.jianshu.com/nb/25338984 简介 selenium.webdriver.remote ...

  10. CodeForces - 899E Segments Removal (优先队列 + 链表)

    给定一个序列,每次从序列中找一个长度最大的元素相同的片段,删除它. 如果长度相同,删除最靠左边的那个片段. 问,需要删几次. 用链表处理删除片段.对于删除之后两边又能连成一个片段的那种情况,用set记 ...