javascript - 用于扩展信息框的 Leaflet 事件监听器

Question

我有一个带有 GeoJSON 点层的简单传单 map 。我想要一个信息框而不是常规弹出窗口，因此，在 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');}