Question

我正在一个网站上显示主要内容div上方的div中的通知（无效的登录详细信息，已成功注册等）。通知的显示就像魅力一样，但我也希望用户能够通过单击按钮来隐藏通知。

为此，我使用了bootstrap中的'collapse'类。然而，这显然是错误的方法，因为div不会完全消失，而是留下一个小笔画可见。我认为这可能是预期的行为，我根本不应该使用崩溃类。所以现在我的问题是：当点击一个按钮时，如何用引导程序整齐地隐藏div？

我目前的代码是：

<div id="notifications_errors" class="hero-unit collapse in">
    <a class="close pull-right" data-toggle="collapse" data-target="#notifications_errors" href="#">&times;</a>
</div>

Answer 1

使用Bootstrap不会妨碍您：

$('#someButton).click(function(event){ $('#someDiv').toggle() })

当然，你在项目中包含了jQuery [如果你使用任何BS js插件，你应该这样做。]

Answer 2

尝试在单独的div块中移动您的内容，最有可能hero-unit类的css与collapse css冲突。

<div id="notifications_errors" class="collapse in">**
  <div class="hero-unit">
    <a class="close pull-right" data-toggle="collapse" data-target="#notifications_errors" href="#">&times;</a>
  </div>
</div>

这应该让.collapse类的.height：0和overflow：hidden属性正常工作。（我有一个类似的问题，尝试使用崩溃和警报格式，这为我修复了它）

如何用bootstrap完全隐藏div

2 个答案: