js实现下拉框效果(select)


Posted in Javascript onMarch 28, 2017

效果图:

js实现下拉框效果(select)

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    *{padding: 0;margin:0;}
    ul,li{list-style: none}
    .left{float: left;}
    .right{float: right;}
    .select_contain{font-size: 14px;color: #333;line-height: 38px;margin: 30px 0;}
    .select_item{margin-right: 50px;position: relative;}
    .select_tit{margin-right: 20px;}
    .select_result{width: 100px;line-height: 38px;border:1px solid #ccc;text-align: center;border-radius: 4px;text-indent: -8px;cursor:pointer;}
    .select_result .triangle{border:5px solid transparent;border-top:5px solid #666;position: absolute;top: 16px; right:8px;}
    .select_item ul{display:none;position:absolute;top:100%;right:0;width:100px;background: #f3f3f3;border:1px solid #ccc;border-radius:0 0 4px 4px; border-top-color:#f3f3f3;margin-top:-4px;}
    .select_item ul li{text-align: center;cursor: pointer;}
    .select_item ul li:hover{background: #f4a100; color: #fff;}
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script>
  function select(){
    $(document).click(function(){
      $(".select_module_con ul").slideUp();
    })
    var module=$(".select_result"); 
    module.click(function(e){
      e.stopPropagation();
      var ul=$(this).next();
      ul.stop().slideToggle();
      ul.children().click(function(e){
        e.stopPropagation();
        $(this).parent().prev().children("span").text($(this).text());
        ul.stop().slideUp();
      })
    })
  }
  $(function(){
    select(); 
  })
  </script>
</head>
<body>
  <div class="select_contain">
      <div class="select_item clearfix left">
        <div class="select_tit left">选择节目:</div>
        <div class="select_module_con left">
          <div class="select_result">
            <span>选择节目</span>
            <div class="triangle"></div>
          </div>
          <ul>
            <li>节目1</li>
            <li>节目2</li>
            <li>节目3</li>
          </ul>
        </div>
      </div>
      <div class="select_item clearfix left">
        <div class="select_tit left">选择嘉宾:</div>
        <div class="select_module_con left">
          <div class="select_result">
            <span>选择嘉宾</span>
            <div class="triangle"></div>
          </div>
          <ul>
            <li>嘉宾1</li>
            <li>嘉宾2</li>
            <li>嘉宾3</li>
          </ul>
        </div>
      </div>
   </div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
vue2.0获取自定义属性的值
Mar 28 #Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 #Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 #Javascript
Vue中的v-cloak使用解读
Mar 27 #Javascript
js实现抽奖效果
Mar 27 #Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 #Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 #Javascript
You might like
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
Python运用于数据分析的简单教程
2015/03/27 Python
python中函数传参详解
2016/07/03 Python
详解python配置虚拟环境
2019/04/08 Python
python实现小球弹跳效果
2019/05/10 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
庆祝教师节演讲稿
2014/09/03 职场文书
英文自荐信范文
2015/03/25 职场文书
整改通知书格式
2015/04/22 职场文书
婚宴新郎致辞
2015/07/28 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS