Twitter Bootstrap 隐藏 CSS 类和 jQuery

Question

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

问题是，当我尝试使用jQuery显示之前隐藏的按钮时，按钮会变小。（使用jQuery隐藏然后显示按钮时不会出现相同的情况）

谢谢您的帮助。

编辑：hide类只是这样的：

.hide {
    display: none;
}

我的按钮：

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

我用的 JavaScript 代码来显示按钮：

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

- siannone

---

使用 Firebug 查找导致该问题的类或属性。 - zerkms

你可以尝试使用.removeClass('hide')来展示你的按钮，而不是使用.toggle()。 - dfsq

与.toggle()相同的结果 - siannone

removeClass 在这里起作用 http://jsfiddle.net/YGP2v/. - dfsq

Bootstrap类.hide附加了!important，因此使用toggle无法起作用，因为类“hide”的"display:none"仍然存在，并且由于!important而具有优先权...这就是为什么removeClass起作用的原因，元素返回到其默认的"display"状态，因为类"hide"已被删除。或者如下所述，toggleClass('hide')也可以很好地工作。 - Tim Blackburn

Answer 1

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

- siannone

Answer 2

如果一个元素有 bootstrap 的 "hide" 类，而你想用一些滑动效果（如 .slideDown()）来显示它，你可以像这样欺骗 bootstrap：

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

- kirpit

Answer 3

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

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

- KiwiPiet

Answer 4

这是我在这种情况下所做的：

我不会以class 'hide'开始html元素，而是放置style="display: none"。

这是因为Bootstrap jQuery会修改style属性而不是隐藏/显示类。

例如：

<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 UI 的 .toggle() 方法一起使用。

- Nicolas Martinez