Bootstrap可见 - * - 块和jQuery toggle()冲突 - 试图隐藏/显示toggle a Div

Question

我在网站上使用了bootstrap和jquery。根据窗口大小，我有2种不同的视图，因此我使用Col-Md- ，Col-Sm- 和可见的 - -Block，hidden-em>等。

我遇到了一个问题，我希望一些divs以"显示：无"的速度开始，直到按下"查看更多"按钮，然后再次单击时再次消失。使用jQuery slidetoggle（）函数正常工作。但是，现在我正在使用"可见XS块"one_answers"可见的md-block"，我正在遇到问题。

。可见的-xs-block将自己定义为：

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

我的隐藏divs具有" hidediv"类，该类别定义为：

.hideDivs {
    display: none;
}

因此，它们开始隐藏起来，然后按下"查看更多"按钮时，该类将被切换。这很好，直到我尝试用slidetoggle（）再次隐藏它们，页面向上滑动，而divs完全消失了（我猜是？）1帧，但随后它们重新出现，因为。可视xs-block踢进来，而且！踢进去。

此代码工作正常，直到我添加了这些新的可见 - * - 块类等，以显示不同的内容。

我尝试添加！对我自己的课程很重要，但是这总是覆盖。可见的-xs块，因此divs永远不会显示。

这是一个小提琴，表明它冲突和工作不正确 - 只需拉窗口的"浏览器"部分，越来越小，然后使用"查看更多"按钮查看我的问题。

我已经使自己如此混淆了自己，我不确定什么是一个好的解决方案。任何帮助将不胜感激。

感谢您的时间！

Answer 1

。可视 - * - 块{display：block！estignt}无论如何显示元素。因此，我们需要用显示：无！有很多方法可以做到这一点，我会在您的代码上为您提供一个简单而懒惰的基础哈哈！使用addClass/removeclass触发显示：无！

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