jquery - bootstrap visible-*-block 和 jquery toggle() 冲突 - 试图隐藏/显示切换一个 div

Question

我在我的网站上使用 bootstrap 和 jquery。根据窗口大小，我有 2 个不同的 View ，所以我使用了 col-md-、col-sm- 和 visible--block、hidden- 等。

我遇到了一个问题，我希望一些 div 以“显示:无”开始，直到按下“查看更多”按钮，然后再次单击时再次消失。这可以正常使用 jQuery slideToggle() 函数正常工作。但是，现在我使用“visible-xs-block”和“visible-md-block”时遇到了问题。

.visible-xs-block 将自己定义为:

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

我的隐藏 div 有类“hideDiv”，定义如下:

.hideDivs {
    display: none;
}

因此，它们一开始是隐藏的，然后当按下“查看更多”按钮时，该类将被关闭。这很好，直到我尝试使用 slideToggle() 再次隐藏它们，页面向上滑动并且 div 完全消失(我猜？)1 帧但随后它们重新出现，因为 .visible-xs-block 启动并且它是 !important 属性开始。

在我添加这些新的 visible-*-block 类等以便能够显示不同的东西之前，这段代码工作正常。

我曾尝试将 !important 添加到我自己的类中，但这总是会覆盖 .visible-xs-block，因此永远不会显示 div。

Here is a fiddle showing it conflicting and working incorrectly - 只需将窗口的“浏览器”部分拉大或拉小，然后使用“查看更多”按钮查看我的问题。

我已经到了让自己非常困惑的地步，我不确定什么是好的解决方案。任何帮助将不胜感激。

感谢您的宝贵时间!

Answer 1

.visible-*-block { display:block !important } 无论如何都会显示它下面的元素。所以我们需要用 display: none !important 覆盖它。有很多方法可以做到这一点，我会根据你的代码给你一个简单而懒惰的方法哈哈!使用 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"); 
 }
});