Twitter Bootstrap 隐藏 css 类和 jQuery

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10349285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:09:54  来源:igfitidea点击:

Twitter Bootstrap hide css class and jQuery

jquerytwitter-bootstrap

提问by siannone

I'm using the hide css class to hide a button on page load.

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

The problem is that when i try to show the button i've previuosly hidden with jQuery the button is smaller.

问题是,当我尝试显示我以前用 jQuery 隐藏的按钮时,该按钮较小。

(the same thing doesn't happen when i use jQuery to hide and then show the button)

(当我使用 jQuery 隐藏然后显示按钮时,不会发生同样的事情)

Thanks for helping.

谢谢你的帮助。

Edit: hide class is just this:

编辑:隐藏类就是这样:

.hide {
    display: none;
}

My button:

我的按钮:

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

Javascript i use to show the button:

我用来显示按钮的Javascript:

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

回答by siannone

As dfsqsaid i just had to use removeClass("hide")instead of toggle()

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

回答by kirpit

If an element has bootstrap's "hide" class and you want to display it with some sliding effect such as .slideDown(), you can cheat bootstrap like:

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

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

回答by KiwiPiet

I agree with dfsqif all you want to do is show the button. If you want to switch between hiding and showing the button however, it is easier to use:

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

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

回答by Nicolas Martinez

This is what I do for those situations:

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

I don't start the html element with class 'hide', but I put style="display: none".

我不使用类“隐藏”开始 html 元素,但我设置了 style="display: none"。

This is because bootstrap jquery modifies the style attribute and not the classes to hide/unhide.

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

Example:

例子:

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

or

或者

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

Later on, you can run all the following that will work:

稍后,您可以运行以下所有可行的方法:

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

You can also uso the class of Twitter Bootstrap 'display-hide', which also works with the jQuery IU .toggle() method.

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