Question

我正在为这个项目使用bootstrap，我想要实现的是这个。单击导航栏切换时，将删除三个水平图标，并将其替换为glyphicon。

<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

使用bootstrap你有类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 2

这个怎么样：

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

Answer 3

您可以使用：

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

<强> Updated Fiddle

如何在单击时替换元素，然后在单击插入的元素时重新插入元素？

3 个答案: