效果

初始

点击后

参考代码

<!DOCTYPE html>

<html>

<head>

<title>Layer group example</title>

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

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"></script>

<style>

    #layertree li > span {

      cursor: pointer;

    }

</style>

<style>

    ul,ol {

        list-style: none

    }

</style>

</head>

<body>

<div id="layertree" class="span6">

  <span>图层列表</span>

  <ul class='layer-list'>

      <li><input type="checkbox"><span>Food insecurity layer</span>

        <fieldset>

          <input class="opacity" type="range" min="0" max="1" step="0.01"/>

        </fieldset>

      </li>

      <li><input type="checkbox"><span>World borders layer</span>

        <fieldset>

          <input class="opacity" type="range" min="0" max="1" step="0.01"/>

        </fieldset>

      </li>

  </ul>

</div>

<script>

$('#layertree li > span').click(function() {

  $(this).siblings('fieldset').toggle();

}).siblings('fieldset').hide();

</script>

</body>

</html>

其中：

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

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

ul,ol {

    list-style: none

}

实例

<!DOCTYPE html>

<html>

<head>

<title>Layer group example</title>

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

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"></script>

<link rel="stylesheet" href="css/ol.css" type="text/css">

<script src="js/ol.js"></script>

<style>

#layertree li > span {

  cursor: pointer;

}

</style>

<style>

  ol,ul{

    list-style:none

  }

</style>

</head>

<body>

<div class="row-fluid">

  <div id="map" class="map"></div>

  <div id="layertree" >

    <span>图层列表</span>

    <ul>      <!--无序列表-->

      <li><span>Food insecurity layer</span>

        <fieldset id="layer0">

            <input class="visible" type="checkbox"/>

            <input class="opacity" type="range" min="0" max="1" step="0.01"/>

        </fieldset>

      </li>

      <li><span>World borders layer</span>

        <fieldset id="layer1">

            <input class="visible" type="checkbox"/>

            <input class="opacity" type="range" min="0" max="1" step="0.01"/>

        </fieldset>

      </li>

    </ul>

  </div>

</div>

<script>

var map = new ol.Map({

  layers: [

    new ol.layer.Tile({

      source: new ol.source.MapQuest({layer: 'sat'})

    }),

    new ol.layer.Group({

      layers: [

        new ol.layer.Tile({

          source: new ol.source.TileJSON({

            url: 'http://api.tiles.mapbox.com/v3/' +

                'mapbox.20110804-hoa-foodinsecurity-3month.jsonp',

            crossOrigin: 'anonymous'

          })

        }),

        new ol.layer.Tile({

          source: new ol.source.TileJSON({

            url: 'http://api.tiles.mapbox.com/v3/' +

                'mapbox.world-borders-light.jsonp',

            crossOrigin: 'anonymous'

          })

        })

      ]

    })

  ],

  target: 'map',

  view: new ol.View({

    center: ol.proj.fromLonLat([37.40570, 8.81566]),

    zoom: 4

  })

});

function bindInputs(layerid, layer) {

  var visibilityInput = $(layerid + ' input.visible');

  visibilityInput.on('change', function() {

    layer.setVisible(this.checked);

  });

  visibilityInput.prop('checked', layer.getVisible());

  $.each(['opacity'],

      function(i, v) {

        var input = $(layerid + ' input.' + v);

        input.on('input change', function() {

          layer.set(v, parseFloat(this.value));

        });

        input.val(String(layer.get(v)));

      }

  );

}

map.getLayers().forEach(function(layer, i) {

  bindInputs('#layer' + i, layer);

  if (layer instanceof ol.layer.Group) {

    layer.getLayers().forEach(function(sublayer, j) {

      bindInputs('#layer' + i + j, sublayer);

    });

  }

});

$('#layertree li > span').click(function() {

  $(this).siblings('fieldset').toggle();

}).siblings('fieldset').hide();

</script>

</body>

</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. React + Python 七月小说网 启程（一）

    一.为啥要做这个网站 很久没有写技术相关的博客了,最近几个月忙飞,各种工作,技术根本学不完,很难受. 趁着春节期间,终于有空闲时间做自己爱做的事情了,美滋滋. 热爱技术,热爱小说,于是诞生了个这么玩意 ...

  2. 【连载】redis库存操作，分布式锁的四种实现方式[四]--基于Redis lua脚本机制实现分布式锁

    一.redis lua介绍 Redis 提供了非常丰富的指令集,但是用户依然不满足,希望可以自定义扩充若干指令来完成一些特定领域的问题.Redis 为这样的用户场景提供了 lua 脚本支持,用户可以向 ...

  3. Selenium API（一）

    1.设置浏览器大小: # -*- coding:utf- -*- from selenium import webdriver import time driver = webdriver.Firef ...

  4. 第二篇 Python运算符

    1.算术运算符 运算符 描述  +  两个值相加  -  两个值相减  *  两个值相乘  /  两个值相除  %  得到两个数相除的余数  **  x**y得到x的y次幂  //  返回两个数相除商 ...

  5. luoguP4396 [AHOI2013]作业

    https://www.luogu.org/problemnew/show/P4396 简单的莫队+树状数组,但博主被卡常了,不保证代码在任何时候都能AC #include <bits/stdc ...

  6. 【SSO单点系列】（4）：CAS4.0 SERVER登录后用户信息的返回

    接着上一篇,在上一篇中我们描述了怎么在CAS SERVER登录页上添加验证码,并进行登录.一旦CAS SERVER验证成功后,我们就会跳转到客户端中去.跳转到客户端去后,大家想一想,客户端总要获取用户 ...

  7. LAMP课程

    LAMP课程 上次课回顾: ls -a:查看全部目录内容 若文件名以“.”开头,则认为是隐藏的文件. ls-l:可以直接用命令 ll命令:ls -l 的别名. ls -m:横向显示文件和目录 ls - ...

  8. ORA-03113 ： end-of-file on communication channel

    现象一: 数据库startup时,出现数据库无法正常mount,并报ORA-03113错误. SQL> startup ORACLE instance started. Total System ...

  9. C# 委托的三种调用示例（同步调用、异步调用、异步回调）

    首先,通过代码定义一个委托和下面三个示例将要调用的方法: 代码如下: public delegate int AddHandler(int a,int b); public class 加法类 { p ...

  10. 【Java】qatools.properties

    Link: https://github.com/qatools/properties 今天在GitHub上看到一个Java库,能方便帮助读取properties的配置文件. 具体使用可以参考上面的链 ...