Bootstrap活动按钮状态持续存在

时间:2014-03-31 00:19:25

标签: javascript css twitter-bootstrap leaflet mapbox

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

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

看起来像这样:

bootstrap buttons

我的怀疑是我的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';
    }
};

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

2 个答案:

答案 0 :(得分: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';
    }

答案 1 :(得分:0)

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

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