[html/js]点击标题出现下拉列表

效果

初始

点击后

参考代码

<!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>

 

posted @ 2015-06-15 22:21  jihite  阅读(9753)  评论(0)  编辑  收藏  举报