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"); 
} 
});