Twitter Bootstrap 隐藏 css 类和 jQuery答案

【问题标题】：Twitter Bootstrap hide css class and jQueryTwitter Bootstrap 隐藏 css 类和 jQuery
【发布时间】：2012-04-27 10:51:24
【问题描述】：

我正在使用 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();

【问题讨论】：

拿 firebug 找出是什么类或属性导致的
如果没有看到您的代码，任何人都无法提供太多帮助。尝试设置jsfiddle.net
如何显示您的按钮？尝试使用.removeClass('hide') 而不是.toggle()。
removeClass 在这里工作jsfiddle.net/YGP2v。
Bootstrap 类 .hide 附加了 !important，因此使用切换将不起作用，因为类“hide”的“display:none”仍然存在，并且由于 !重要...这就是 removeClass 起作用的原因，元素回到其默认的“显示”状态，因为“隐藏”类已被删除。或者如下所述，toggleClass('hide') 也可以正常工作。

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果一个元素有 bootstrap 的“hide”类并且你想用一些滑动效果来显示它，比如.slideDown()，你可以像下面这样欺骗 bootstrap：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

我没有以“隐藏”类开始 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() 方法。

【讨论】：