2013-04-23 52 views
0

我正在致力於在主內容div上方的div中顯示通知(無效登錄詳細信息,註冊成功等)的網站。通知的顯示就像一個魅力,但我也希望用戶能夠通過單擊按鈕來隱藏通知。如何使用引導程序完全隱藏div

爲此,我使用bootstrap中的'collapse'類。然而,這顯然是錯誤的方法,因爲div不會完全消失,而是可以看到一個小的中風。我想這可能是預期的行爲,我根本不應該使用崩潰類。所以現在我的問題是:當點擊一個按鈕時,我如何巧妙地用bootstrap隱藏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> 

回答

1

使用引導程序不會阻止你做:

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

就算你在你的項目中包含的jQuery [你應該,如果你使用的任何BS js插件]。

+0

我知道,我只是想知道是否有更多的「bootstrappy」的方式來做到這一點。謝謝,無論如何! – user1870238 2013-04-23 12:15:54

+0

Bootstrap只是以類似的方式使用jQuery。你描述的問題是風格之一,而不是jQuery。 – isherwood 2013-04-23 17:17:12

+0

工作正常,你只是在最後錯過了')' – 2013-12-26 13:01:14

0

嘗試在單獨的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> 

這應該讓.height:0和溢出:在.collapse類工作的隱藏屬性正常。 (我有一個類似的問題試圖使用崩潰的警報格式,併爲我修復了這個問題)