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
Twitter Bootstrap hide css class and jQuery
提问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
回答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
回答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() 方法。