Question

我写了CSS来定义菜单的颜色，并且当发生不同的动作时，菜单中的按钮将显示不同的颜色。但是，由于我想将按钮的颜色设置为与点的颜色相同，因此在生成按钮时，我在JS中定义了背景色。结果，无论点显示与否，按钮的背景色都不会改变。点不显示时如何将菜单按钮转换为白色？

var toggleableLayerIds = ['Restaurants', 'Food', 'Shopping', 'Travel', 'Leisure', 'Night Life', 'Beauty & Health', 'Local Services'];

var LayerColors = ['#F44336', '#FF9800', '#FFEB3B', '#4CAF50', '#03A9F4', '#3F51B5', '#9C27B0', '#607D8B'];

for (var i = 0; i < toggleableLayerIds.length; i++) {
  var id = toggleableLayerIds[i];
  var color = LayerColors[i]

  var link = document.createElement('a');
  link.href = '#';
  link.className = 'active';
  link.textContent = id;
  link.style.backgroundColor = color;

  link.onclick = function(e) {
    var clickedLayer = this.textContent;
    e.preventDefault();
    e.stopPropagation();

    var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

    if (visibility === 'visible') {
      map.setLayoutProperty(clickedLayer, 'visibility', 'none');
      this.className = '';
    } else {
      this.className = 'active';
      map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
    }
  };

  var layers = document.getElementById('menu');
  layers.appendChild(link);
}

#menu {
  background: #fff;
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 40px;
  border-radius: 3px;
  width: 120px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
}

#menu a {
  font-size: 12px;
  color: #404040;
  display: block;
  margin: 0;
  padding: 0;
  padding: 3px;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  text-align: center;
}

#menu a:last-child {
  border: none;
}

#menu a:hover {
  background-color: #f8f8f8;
  color: #404040;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10)
}

#menu a.active {
  background-color: #FBC02D;
  color: #ffffff;
}

#menu a.active:hover {
  background: #9E9E9E;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10)
}

<nav id="menu"></nav>

This picture shows the map I have made yet

Answer 1

您需要在循环中检查地图上当前图层是否有点。如果没有点，则可以使用color: #fff;或display: none;或任何您想要的内容将CSS类添加到当前按钮。

点不显示时如何将菜单按钮转换为白色？

1 个答案: