Question

使用Bootstrap 3，我想在稍后显示的页面上有一个元素，以响应用户单击按钮。例如：

<div id="search_results">
... gets populated from ajax data later ...
</div>

<button id="search_button" type="button" class="btn btn-primary pull-right">Search</button>

<script>
$('#search_button').click(function() {
    // ... do the call to search
    // and in the callback: 
    $('#search_results').show();
});
</script>

最初应隐藏search_results div。使用bootstrap有没有一些正常/最佳实践方法？

是的，我确实知道我可以在search_results上放置style =“display：none”，但这是最好的方法吗？拥有一种在语义上意味着“最初隐藏”的风格似乎更好一些。（注意：隐藏或隐藏类不会这样做！重要和show（），toggle（）等使用不覆盖它们的内联样式，即设置“隐藏”，因为类使其无法显示来自jQuery。）

Answer 1

查看来源建议.collapse或.invisible是选项，具体取决于您是分别要求display: none;行为还是visibility: hidden;行为。

更新，2016-03-08：Bootstrap v4的早期采用者应该注意.invisible的规则现在是visibility: hidden !important;。（.collapse不变。）

Answer 2

您可以使用hidden类来隐藏元素

<div id="search_results" class="hidden">
... gets populated from ajax data later ...
</div>

然后

$('#search_button').click(function () {
    // ... do the call to search
    // and in the callback: 
    $('#search_results').removeClass('hidden');
});

演示：Fiddle

Showing and hiding content

是否有Twitter Bootstrap类意味着＆＃34;最初隐藏＆＃34;？

2 个答案: