通过jQuery在移动设备上显示"visible-lg“目录

Question

这个问题听起来很奇怪，因为如果我在bootstrap上定义了一个带有"visible-lg“属性的div，我这样做是为了只在桌面设备上显示。但是我想要一些使用这个类的响应式布局的行为。

我想要实现的是:我有3列(col 2，col 3和col 7)最后两列(lg-3和lg-7)都有"visible-lg“属性，这样在移动设备上我只能看到第一列。我想要实现的是:当我点击某个按钮时(只有在第一列上有“visible -X”的手机才能看到)，我会这样做：

$(".btn1").click(function(){
    $(".col1").slideUp(); //hide the first col
    $(".col2").slideDown(); //show the second (with visible-lg)
});

为什么我想要这个？让我们假设当用户单击这个按钮时，我用他点击的第一个按钮的特定内容填充了第二列，现在我想用内容显示第二列。但我希望在移动设备上每次只显示一列，使其具有响应性。

是否可以使用bootstrap + jQuery的响应式实用程序来实现这一点，或者我需要编写一个新的CSS类？

Answer 1

好吧，我仍然不确定这是否会像我想要的那样工作(具有完整的细节，等等)，但是为了显示之前在移动设备上隐藏的div，而不是使用：

$(".col2").slideDown()；

我使用：

可见$(“.col2”).toggleClass(“

-xs”)；

通过这种方式，我添加了类' visible -xs‘，它在移动设备上也变得可见。