以编程方式折叠传单JS层控件

Programmatically collapse Leaflet JS layer control

本文关键字：JS 控件 编程 方式 折叠      更新时间：2023-09-26

如何使用JS代码关闭传单JS层控件?在桌面上，当鼠标光标离开控件时，控件会很好地关闭。然而，在手机上，用户需要在控件外点击关闭它。我想手动关闭它一旦用户选择控件内的图层

该控件的状态由leaflet-control-layers-expanded类控制。如果向leaflet-control-layers元素添加或删除该类，则可以控制状态。

为了简单，这些例子使用jQuery。

展开控件:

$(".leaflet-control-layers").addClass("leaflet-control-layers-expanded")

折叠控件:

$(".leaflet-control-layers").removeClass("leaflet-control-layers-expanded")

对于移动设备，我只需在div中添加一个关闭按钮，然后使用js更改类，如上所述:

请注意，我在这里改变了传单源代码，但它应该是可行的外部以及。在传单的container.appendChild(form);行之前添加以下代码(经过0.7.7测试)

if (L.Browser.android || L.Browser.mobile || L.Browser.touch || L.Browser.retina) {
    var yourCloseButton = this.yourCloseButton = L.DomUtil.create('div', className + '-close');
    this.yourCloseButton = L.DomUtil.create('div', className + '-close', form);
    this.yourCloseButton.innerHTML = '<button class="btn-close-layers-control">X</button>'; 
L.DomEvent.on(this.yourCloseButton, 'click', this._collapse, this);  
}
相关文章：