javascript - Bootstrap 事件按钮状态持续存在

Question

我使用 Bootstrap 垂直按钮组作为复选框样式的 UI 来控制 this mapbox.js-based interactive map 上的图层.层控制功能很好用，但由于某些原因，按钮:

• 以正常状态加载(他们应该)
• 点击时进入事件状态(他们应该这样做)
• 下次点击它们时保持事件状态颜色(悲伤的表情符号)

看起来像这样:

我怀疑我的 onclick 函数正在干扰 Bootstrap 按钮组的 native 行为，但我终究无法弄清楚如何做到这一点。这是我目前拥有的该功能，管理按钮类更新和 map 图层更新:

link.onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (map.hasLayer(layer)) {
        map.removeLayer(layer);
        this.className = 'btn btn-primary';
    } else {
        map.addLayer(layer);
        this.className = 'active btn btn-primary';
    }
};

鉴于此，我怎样才能让我的按钮正确取消选择？

Answer 1

这应该可以修复它，只需将 stop() 函数添加到您的 else 语句中，以便它从上一个按钮中删除 active 类并将其添加到被点击的按钮中按钮。

 if (map.hasLayer(layer)) {
        map.removeLayer(layer);
        this.className = 'btn btn-primary';
    } else {
        map.addLayer(layer);
        this.stop().className = 'active btn btn-primary';
    }