javascript - 显示隐藏的移动响应 div

Question

我有一行 3 列。

|   1   |   2   |    3    |

我想在大屏幕和中屏幕中显示所有列。但在移动屏幕中，我只想显示第一列。我用这段代码完成了这项工作。

<div class="row">
        <div class="col-md-4 col-lg-4">
                <asp:Label ID="lblCatagory1" runat="server" Text=""></asp:Label>
        </div>

        <div class="col-md-4 col-lg-4 hidden-sm hidden-xs" id="cat2">
                <asp:Label ID="lblCatagory2" runat="server" Text=""></asp:Label>
        </div>

        <div class="col-md-4 col-lg-4 hidden-sm hidden-xs" id="cat3">
                <asp:Label ID="lblCatagory3" runat="server" Text=""></asp:Label>
        </div>
</div>

现在我想在这段代码下方的移动版本中创建一个按钮。通过单击此按钮，其他两列将显示。这在 Bootstrap/JavaScript 中怎么可能 **创建按钮不是我的问题。

Answer 1

你可以做到这一点。

$('button').on('click', function(){
  $('#cat2, #cat#3').toggleClass('hidden-sm').toggleClass('hidden-xs')
})