Question

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

我遇到了一个问题，我希望某些div以“display：none”开始，直到按下“see more”按钮然后再次单击时再次消失。通常使用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-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"); 
 }
});

bootstrap visible - * - block和jquery toggle（）冲突 - 试图隐藏/显示切换div

1 个答案: