bootstrap可見 - * - 塊和jQuery切換（）衝突 - 試圖隱藏/顯示切換div

Question

我在我的網站上使用引導和jQuery。我有2個不同的看法取決於窗口的大小，所以我利用COL-MD-，COL-SM-和visible- - 塊的，hidden-等

我碰到一個問題，我希望一些div以「display：none」開頭，直到按下「see more」按鈕，然後再次單擊時再次消失。這可以正常使用jQuery slideToggle（）函數。但是，現在我使用「visible-xs-block」和「visible-md-block」，我遇到了一個問題。

。可見-XS-塊本身定義爲：

@media (max-width: 991px) and (min-width: 768px) 
    .visible-sm-block { 
     display: block!important; 
} 

我隱藏層必須被定義爲類 「hideDiv」 如下：

.hideDivs { 
    display: none; 
} 

於是，他們開始了隱蔽性和那麼當按下「see more」按鈕時，該類將被關閉。這是沒有問題的，直到我試圖用slideToggle（）再次隱藏它們，頁面向上滑動並且divs完全消失（我猜？）1幀，但隨後它們再次出現，因爲.visible-xs-block會踢入並且它是重要的屬性踢進去。

此代碼工作正常，直到我添加了這些新的可見 - * - 塊類等能夠顯示不同的東西。

我已經嘗試添加！重要的是我自己的類，但隨後總是覆蓋.visible-xs塊，因此div永遠不會顯示。

Here is a fiddle showing it conflicting and working incorrectly - 只需將窗口的「瀏覽器」部分拉得越來越小，並使用「查看更多」按鈕來查看我的問題。

我已經到了一個地步，我只是很困惑自己，我不知道一個好的解決方案會是什麼。任何幫助將非常感激。

謝謝你的時間！

Answer 1

.visible - * - block {display：block！important}正在顯示它下面的元素，不管是什麼。所以我們需要用display：none！重寫。有很多方法可以做到這一點，我會給你一個簡單和懶惰的基礎你的代碼哈哈！使用addclass/removeclass來觸發display：none！important。

CSS

.hidden { 
    display: none !important; 
} 

JS

$('.see-more-button').click(function() { 
event.preventDefault(); 
if($('.hideDiv').is(":visible")) { 
    $('.hideDiv').addClass("hidden"); 
    $('.see-more-button').text("+ See more"); 
} 
else { 
    $('.hideDiv').removeClass("hidden").show(); 
    $('.see-more-button').text("- See less"); 
} 
});