jquery - Twitter Bootstrap 隐藏 css 类和 jQuery

Question

我正在使用 hide css 类在页面加载时隐藏一个按钮。

问题是，当我尝试显示之前用 jQuery 隐藏的按钮时，按钮变小了。

（当我使用 jQuery 隐藏然后显示按钮时，同样的事情不会发生）

感谢您的帮助。

编辑：隐藏类就是这样：

.hide {
    display: none;
}

我的按钮：

<a class="btn hide" id="buttonEditComment" href="javascript:void()"><i class="icon-comment"></i> Edit comment</a>

我用来显示按钮的Javascript：

$("#buttonEditComment").toggle();

score 41 · Accepted Answer

41

正如dfsq所说，我只需要使用removeClass("hide")而不是toggle()

于 2012-04-28T09:23:12.030 回答

score 17 · Accepted Answer

如果一个元素具有引导程序的“隐藏”类，并且您想以某种滑动效果显示它，例如.slideDown()，您可以像这样欺骗引导程序：

$('#hiddenElement').hide().removeClass('hide').slideDown('fast')

score 7 · Accepted Answer

如果您只想显示按钮，我同意dfsq 。但是，如果您想在隐藏和显示按钮之间切换，则使用起来更容易：

$("#buttonEditComment").toggleClass("hide");

score 3 · Accepted Answer

这就是我对这些情况所做的：

我不使用类“隐藏”来启动 html 元素，但我输入了 style="display: none"。

这是因为引导 jquery 修改样式属性而不是要隐藏/取消隐藏的类。

例子：

<button type="button" id="btn_cancel" class="btn default" style="display: none">Cancel</button>

或者

<button type="button" id="btn_cancel" class="btn default display-hide">Cancel</button>

稍后，您可以运行以下所有可行的操作：

$('#btn_cancel').toggle() // toggle between hide/unhide
$('#btn_cancel').hide()
$('#btn_cancel').show()

你也可以使用 Twitter Bootstrap 'display-hide' 类，它也适用于 jQuery IU .toggle() 方法。

4 回答 4