<!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. UVA 1451 Average平均值 (数形结合,斜率优化)

    摘要:数形结合,斜率优化,单调队列. 题意:求一个长度为n的01串的子串,子串长度至少为L,平均值应该尽量大,多个满足条件取长度最短,还有多个的话,取起点最靠左. 求出前缀和S[i],令点Pi表示(i ...

  2. CPP-基础:类的静态成员

    一 静态数据成员:  类体中的数据成员的声明前加上static关键字,该数据成员就成为了该类的静态数据成员.和其他数据成员一样,静态数据成员也遵守public/protected/private访问规 ...

  3. NFS缓存IO机制

    NFS的缓存IO机制<一> async 参数模式下分析 NFS 默认的mount参数为async,async 参数表示内核不会透传程序的IO请求给sever,对于写IO会延迟执行,积累一定 ...

  4. jvm | 基于栈的解释器执行过程

    一段简单的算术代码: public class Demo { public static void main(String[] args) { int a = 1; int b = 2; int c ...

  5. Java的日期类和日期格式化类

    日期类: Date date = new Date(); // 获取当前的系统时间 2 System.out.println("年份:"+ date.getYear()); Cal ...

  6. 第四次作业:Windows各种基本应用的命令处理方法

    删除文件夹命令? rd (remove directory) 如何给文件夹重新命名? ren (rename) 如何在文件夹中建立文件夹? md swift\a 如何用命令查看文本文件的内容? typ ...

  7. MFC中获得各种指针概述(个人觉得是很重要的重点)

    前言:这学期学习MFC(有点过时的东西),上课时,老师讲到获取当前活动指针,获取视图指针,文档指针,文档模板指针等(已晕) 后来下来真正写代码的时候发现这些几乎都是需要用到的东西,所以特此记录下,让自 ...

  8. 洛谷 P3601 签到题

    https://www.luogu.org/problemnew/show/P3601 一道关于欧拉函数的题. 读完题目以后我们知道所谓的$aindao(x)=x- \phi (x) $. 对于x小的 ...

  9. mysql关联查询

    mysql数据库的统计------生成统计信息 1.distinct:在一组之中将各个唯一的值找出来,如找出所有的品牌种类 mysql>select distinct brand_kind fr ...

  10. Git - revert详解

    git revert 撤销 某次操作,此次操作之前和之后的commit和history都会保留,并且把这次撤销作为一次最新的提交    * git revert HEAD                ...