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 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
Javascript中replace()小结
Sep 30 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
javascript实现简易计算器的代码
May 31 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PDO::_construct讲解
2019/01/27 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
微信小程序form表单组件示例代码
2018/07/15 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
防灾减灾日活动总结
2014/08/26 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android