Question

我有一个带有GeoJSON点图层的简单传单图。我想要一个信息框而不是常规弹出窗口，因此，在HTML中，我创建了以下内容：

<div id="panoutitlu" class="info-container" style="z-index: 601">
   <div class="info-title">
      <h1>Selectați ceva</h1>
  </div>
  <div class="info-body" id="corp">
   <div class="info-content-container">
    <div class="info-content" id="panoutext"></div>
 </div>
 </div>
</div>

单击图层中的某个点时，名为info-title的div将使用GeoJSON中的属性填充，如下所示：

function onEachFeature(feature, layer) {
  layer.on({
     click: function populate() {
        document.getElementById('panoutitlu').innerHTML = feature.properties.adresa;
     });

我无法工作的是如何在点击info-title时展开div，类似于this map。我想重新创建确切的行为，包括平滑过渡。这就是我从中获取CSS并更改了一些尺寸和字体的原因：

.info-title {
 height: 80px;
 font-family: 'Fira Sans Condensed';
 font-size: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 user-select: none;
 color: #FFF;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 }

.info-content {
 padding: 0 8% 24px 8%;
 margin: 0 auto;
 background: #385c54;
 overflow-y: scroll;
 font-family: 'Fira Sans Condensed';
 font-size: 1rem;
 line-height: 1.25em;
 font-weight: 300;
}

.info-container {
 position: absolute;
 overflow-y: hidden;
 bottom: 0;
 right: 250px;
 z-index: 1000;
 background: #385c54;
 cursor: pointer;
 width: 300px;
 height: 60vh;
 color: #FFF;
 font-family: 'Fira Sans Condensed';
 font-size: 18px;
 transition: all 0.4s ease-in-out;
 transform: translateY(calc(100% - 80px));
 }

.info-container.info-active {
 transform: translateY(0);
 }

.info-body {
 margin-top: 80px;
 overflow-y: scroll;
 overflow-x: hidden;
 position: relative;
 height: 80%;
}

在JavaScript中，我尝试添加一个事件监听器：

document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );

但它不起作用。

希望有人可以提供帮助。

Answer 1

解决方案确实是一个事件监听器：

document.getElementById('panoutitlu').addEventListener("click", function slide() {this.classList.toggle('info-active');}

用于扩展信息框的传单事件监听器

1 个答案: