Bootstrap活动按钮状态持续存在

Question

我使用bootstrap垂直按钮组作为复选框式UI来控制this mapbox.js-based interactive map上的图层。图层控制功能很有用，但出于某种原因按钮：

• 以正常状态加载（应该如此）
• 点击时进入活动状态（应该如此）
• 下次点击时保留活动状态颜色（悲伤表情表情符号）

看起来像这样：

我的怀疑是我的onclick功能正在干扰引导按钮组的本机行为，但我不能为我的生活弄清楚如何。这是我目前对该功能的管理，同时管理按钮类更新和地图图层更新：

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';
    }

Answer 2

虽然对我来说真的没有意义，为什么会出现这种情况，但我通过一个非常简单的改变解决了这个问题：

我没有使用<button>元素构建按钮，而是将它们切换为<a>个元素。现在工作得很好。如果有人能解释原因，我很乐意听到它。