如何在點擊時替換元素，然後在插入元素被點擊時重新插入它？

Question

我爲這個項目使用bootstrap，我想實現的是這個。點擊導航欄切換時，三個水平圖標將被刪除，它們將被替換爲圖形。

<span class="glyphicon glyphicon-remove"></span> 

我使用remove（）和prepend（）處理程序來實現此目的。

$(document).ready(function() { 
    $('.navbar-toggle').click(function() { 
    $('.icon-bar').remove(); 
    $(".navbar-toggle").prepend('<span class="glyphicon glyphicon-remove"></span>'); 
    }); 
}); 

它移除，並與交叉更換圖標吧，但我不能工作了我如何可以使之變回成水平圖標欄點擊交叉時。目前它只是增加了更多的十字架。對不起，如果這是一個愚蠢的問題，我仍然是新的。

http://jsfiddle.net/Gvauv/

Answer 1

您可以使用：

$('.navbar-toggle').click(function() { 
    $(this).toggleClass('glyphicon glyphicon-remove').find('.icon-bar').toggleClass("hidden"); 
}); 

Updated Fiddle

Answer 2

與引導你有類hidden，這樣你就可以在HTML添加glyphicon，只是將其隱藏。是這樣的：

<span class="icon-bar"></span> 
<span class="glyphicon glyphicon-remove hidden"></span> 

JS

$(document).ready(function() { 
    $('.navbar-toggle').click(function() { 
    $('.icon-bar').toggleClass('hidden'); 
    $('.glyphicon').toggleClass('hidden'); 
    }); 
}); 

Answer 3

這個怎麼樣：

$(document).ready(function() { 
    $('.navbar-toggle').click(function() { 
    $('.icon-bar').toggleClass("hidden"); 
    $('.navbar-toggle').toggleClass('glyphicon glyphicon-remove'); 
    }); 
});