我在我的网站上使用 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 - 只需将窗口的“浏览器”部分拉大或拉小,然后使用“查看更多”按钮查看我的问题。
我已经到了让自己非常困惑的地步,我不确定什么是好的解决方案。任何帮助将不胜感激。
感谢您的宝贵时间!
最佳答案
.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");
}
});
关于jquery - bootstrap visible-*-block 和 jquery toggle() 冲突 - 试图隐藏/显示切换一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42704328/