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')
})

Answer 2

你可以这样做.. 在第1列添加一个id，然后使用jquery（），你可以将类添加到col 2和col3并在同一行显示它们。

<script type="text/javascript">
    $('#button1').click(function () {
        $('#cat2, #cat3').toggleClass('hidden-sm').toggleClass('hidden-xs');
        $('#cat1, #cat2, #cat3').addClass('col-sm-4 col-xs-4').addClass('col-sm-4 col-xs-4').addClass('col-sm-4 col-xs-4');
    });

希望这有帮助

显示隐藏移动响应div

2 个答案: