Bootstrap data-toggle =“按鈕”無法使用

Question

我正在使用Bootstrap中的'data-toggle'-選項作為按鈕。 在按鈕中，我有一個glypicons和sometext。 但是，當您單擊文本時它起作用，但是當您單擊glyphicon時，它不會觸發數據切換。 由於數據切換在JSFiddle中不起作用，因此無法發布指向它的鏈接。

HTML：

<button type="button" id="showHide" class="btn btn-default" data-toggle="button"><span class="glyphicon glyphicon-eye-open"></span> show</button>

JavaScript的：

document.getElementById("showHide").onclick = function () {
    if ($("#showHide").text() == " show") {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
        document.getElementById("showHide").blur();
    } else {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
        document.getElementById("showHide").blur();
    }
}

我在網上看過，但沒有找到解決方案或遇到相同問題的人。

Answer 1

在切換事件傳播之前，似乎跨度已被替換。 您可以使用button方法而不是數據屬性來激活切換。

<button type="button" id="showHide" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> show</button>

document.getElementById("showHide").onclick = function () {
    if ($("#showHide").text() == " show") {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
        jQuery("#showHide").button('toggle');        
        document.getElementById("showHide").blur();
    } else {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
        jQuery("#showHide").button('toggle');        
        document.getElementById("showHide").blur();
    }
}

查看小提琴