效果

初始

点击后

参考代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Layer group example</title>
  5. <script src="js/jquery-1.11.1.min.js"></script>
  6.  
  7. <link rel="stylesheet" href="css/bootstrap.min.css">
  8. <script src="js/bootstrap.min.js"></script>
  9.  
  10. <style>
  11.     #layertree li > span {
  12.       cursor: pointer;
  13.     }
  14. </style>
  15.  
  16. <style>
  17.     ul,ol {
  18.         list-style: none
  19.     }
  20. </style>
  21.  
  22. </head>
  23. <body>
  24.  
  25. <div id="layertree" class="span6">
  26.   <span>图层列表</span>
  27.   <ul class='layer-list'>
  28.       <li><input type="checkbox"><span>Food insecurity layer</span>
  29.         <fieldset>
  30.           <input class="opacity" type="range" min="0" max="1" step="0.01"/>
  31.         </fieldset>
  32.       </li>
  33.  
  34.       <li><input type="checkbox"><span>World borders layer</span>
  35.         <fieldset>
  36.           <input class="opacity" type="range" min="0" max="1" step="0.01"/>
  37.         </fieldset>
  38.       </li>
  39.   </ul>
  40. </div>
  41. <script>
  42.  
  43. $('#layertree li > span').click(function() {
  44.   $(this).siblings('fieldset').toggle();
  45. }).siblings('fieldset').hide();
  46.  
  47. </script>
  48. </body>
  49. </html>

其中：

1. <html>标签<ul>表示无序列表；<ol>比奥斯有序列表

2. 以下格式，表示每一小项的前边没有默认的黑点

  1. ul,ol {
  2.     list-style: none
  3. }

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Layer group example</title>
  5. <script src="js/jquery-1.11.1.min.js"></script>
  6.  
  7. <link rel="stylesheet" href="css/bootstrap.min.css">
  8. <script src="js/bootstrap.min.js"></script>
  9.  
  10. <link rel="stylesheet" href="css/ol.css" type="text/css">
  11. <script src="js/ol.js"></script>
  12.  
  13. <style>
  14. #layertree li > span {
  15.   cursor: pointer;
  16. }
  17. </style>
  18. <style>
  19.   ol,ul{
  20.     list-style:none
  21.   }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="row-fluid">
  26.   <div id="map" class="map"></div>
  27.  
  28.   <div id="layertree" >
  29.     <span>图层列表</span>
  30.     <ul>      <!--无序列表-->
  31.       <li><span>Food insecurity layer</span>
  32.         <fieldset id="layer0">
  33.             <input class="visible" type="checkbox"/>
  34.             <input class="opacity" type="range" min="0" max="1" step="0.01"/>
  35.         </fieldset>
  36.       </li>
  37.  
  38.       <li><span>World borders layer</span>
  39.         <fieldset id="layer1">
  40.             <input class="visible" type="checkbox"/>
  41.             <input class="opacity" type="range" min="0" max="1" step="0.01"/>
  42.         </fieldset>
  43.       </li>
  44.     </ul>
  45.   </div>
  46. </div>
  47.  
  48. <script>
  49. var map = new ol.Map({
  50.   layers: [
  51.     new ol.layer.Tile({
  52.       source: new ol.source.MapQuest({layer: 'sat'})
  53.     }),
  54.     new ol.layer.Group({
  55.       layers: [
  56.         new ol.layer.Tile({
  57.           source: new ol.source.TileJSON({
  58.             url: 'http://api.tiles.mapbox.com/v3/' +
  59.                 'mapbox.20110804-hoa-foodinsecurity-3month.jsonp',
  60.             crossOrigin: 'anonymous'
  61.           })
  62.         }),
  63.         new ol.layer.Tile({
  64.           source: new ol.source.TileJSON({
  65.             url: 'http://api.tiles.mapbox.com/v3/' +
  66.                 'mapbox.world-borders-light.jsonp',
  67.             crossOrigin: 'anonymous'
  68.           })
  69.         })
  70.       ]
  71.     })
  72.   ],
  73.   target: 'map',
  74.   view: new ol.View({
  75.     center: ol.proj.fromLonLat([37.40570, 8.81566]),
  76.     zoom: 4
  77.   })
  78. });
  79.  
  80. function bindInputs(layerid, layer) {
  81.   var visibilityInput = $(layerid + ' input.visible');
  82.   visibilityInput.on('change', function() {
  83.     layer.setVisible(this.checked);
  84.   });
  85.   visibilityInput.prop('checked', layer.getVisible());
  86.  
  87.   $.each(['opacity'],
  88.       function(i, v) {
  89.         var input = $(layerid + ' input.' + v);
  90.         input.on('input change', function() {
  91.           layer.set(v, parseFloat(this.value));
  92.         });
  93.         input.val(String(layer.get(v)));
  94.       }
  95.   );
  96. }
  97. map.getLayers().forEach(function(layer, i) {
  98.   bindInputs('#layer' + i, layer);
  99.   if (layer instanceof ol.layer.Group) {
  100.     layer.getLayers().forEach(function(sublayer, j) {
  101.       bindInputs('#layer' + i + j, sublayer);
  102.     });
  103.   }
  104. });
  105.  
  106. $('#layertree li > span').click(function() {
  107.   $(this).siblings('fieldset').toggle();
  108. }).siblings('fieldset').hide();
  109.  
  110. </script>
  111. </body>
  112. </html>

[html/js]点击标题出现下拉列表的更多相关文章

  1. JS弹出模态窗口下拉列表特效

    效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...

  2. jquery如何实现点击标题收缩下面的内容

    jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...

  3. [WPF]ComboBox.Items为空时，点击不显示下拉列表

    ComboBox.Items为空时,点击后会显示空下拉列表: ComboBox点击显示下拉列表,大概原理为: ComboBox存在ToggleButton控件,默认ToggleButton.IsChe ...

  4. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  5. selenium—JS点击方法

    package com.allin.pc;import java.util.NoSuchElementException;import org.openqa.selenium.By;import or ...

  6. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  8. Js点击触发Css3的动画Animations、过渡Transitions效果

    关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...

  9. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

随机推荐

  1. C# 高性能对象映射(表达式树实现)

    前言 上篇简单实现了对象映射,针对数组,集合,嵌套类并没有给出实现,这一篇继续完善细节. 开源对象映射类库映射分析 1.AutoMapper 实现原理:主要通过表达式树Api 实现对象映射 优点: . ...

  2. windows环境下安装ZooKeeper

    $.说明 ZooKeeper: ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件. 它是一个为分布式 ...

  3. 使用 GPU 加速计算

    U-n-i-t-y 提供了 [Compute Shader][link1] 来使得我们可以将大量的复杂重复的计算交给并行的 GPU 来处理,正是由于并行原因,这样就可以大大加快计算的速度,相比在 CP ...

  4. windows查看和杀死占用端口的进程

    1.首先使用 netstat -ano查看占用端口的进程号 2.然后使用 taskkill /PID (进程号)杀死进程

  5. 月薪3万+的大数据人都在疯学Flink，为什么？

    身处大数据圈近5年了,在我的概念里一直认为大数据最牛的两个东西是Hadoop和Spark.18年下半年的时候,我突然发现身边很多大数据牛人都是研究学习Flink,甚至连Spark都大有被冷落抛弃的感觉 ...

  6. [SCOI2007]最大土地面积（旋转卡壳）

    首先,最大四边形的四个点一定在凸包上 所以先求凸包 有个结论,若是随机数据,凸包包括的点大约是\(\log_2n\)个 然鹅,此题绝对不会这么轻松,若\(O(n^4)\)枚举,只有50分 所以还是要想 ...

  7. js 有用信息集

    1.java.cookie.js 库:轻易操作cookie 2.jquery.form.js 库:通过ajaxForm,ajaxsubmit 两个函数,将form转为ajax提交方式:https:// ...

  8. AtCoder - 2568 最小割

    There is a pond with a rectangular shape. The pond is divided into a grid with H rows and W columns ...

  9. 10、C++函数

    1.定义函数和函数调用: 1.1.定义函数: 可以将函数分为两类,没有返回值的函数,和有返回值得函数,没有返回值得函数被称为void函数,其通用格式如下: void funtionname (para ...

  10. Logistic Regression-Cost Fuction

    1. 二分类问题 样本:  ,训练样本包含  个: 其中  ,表示样本 包含 个特征:  ,目标值属于0.1分类: 训练数据:  输入神经网络时样本数据的形状: 目标数据的形状: 2. logisti ...