Bootstrap面板：在移動設備上折疊但在桌面上展開，怎么樣？

Question

如果屏幕小於1199px（Bootstrap的xs，sm和md模式），我怎么能盡可能簡單地從id為“panel-login”的div中刪除“in”類。 我想某種JS或JQuery可以解決它，但我也不是很擅長。

<div class="panel-group">
<div class="panel panel-default">
    <div class="panel-heading">

        <div class="row">

            <div class="col-xs-10">
                <h4 class="panel-title">Login</h4>
            </div>

            <div class="col-xs-2 text-right">
                <a data-toggle="collapse" href="#panel-login"><i class="fa fa-bars"></i></a>
            </div>

        </div>

    </div>

    <div id="panel-login" class="panel-collapse collapse in">

        <div class="panel-body">

            <ul>
                <li><a href="<?=$php_self?>?page=login&view=signup">Create account</a></li>
                <li><a href="<?=$php_self?>?page=login&view=reset_password">Reset password</a></li>
                <li><a href="<?=$php_self?>?page=login&view=reactivate_account">Reactivate account</a></li>
            </ul>

        </div><!-- end panel-body -->

    </div>

</div><!-- end panel-default -->

Answer 1

您可以使用CSS @media查詢來隱藏它..如果.in則覆蓋效果

@media (max-width:1199px) {
    #panel-login {
        display:none;
    }
}

CSS： http ： //codeply.com/go/Q4X15Bp31R

或者，你可以使用jQuery並觀看像這樣的resize事件。

function togglePanel (){
   var w = $(window).width();
   if (w <= 1199) {
      $('#panel-login').removeClass('in');
   } else {
      $('#panel-login').addClass('in');
   }
}

$(window).resize(function(){
     togglePanel();
});

togglePanel();

jQuery： http ： //codeply.com/go/okQQKcdO7v

Answer 2

HTML

在你的panel-heading元素中添加

<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span>

在你的panel-body元素中添加“collapse”：

<div class="panel-body collapse">

JAVASCRIPT

$(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
    var d = $this.parents('.panel').find('.panel-body');
        if(!d.hasClass('collapse in')) {
            d.slideDown();
            d.addClass('in');
            $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
        }
        else {
            d.slideUp();
            d.removeClass('in');
            $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
        }
})

在全局添加javascript代碼段后，您只需添加HTML代碼段即可對每個面板進行訪問。

要使移動設備折疊，只需觸發移動設備的collapse()功能即可

if (($(window).width()) > 767) {
    $('.collapse').collapse();
}

或者您可以檢查漢堡包菜單是否可見

if (!$('.navbar-toggle').is(':visible')) {
  $('.collapse').collapse();
}

Answer 3

這是我用過的：

@media (min-width: 768px) {
  #my-div .collapse {
    display: block;
  }
}

Answer 4

試試這個：

<head>
    ...
    <script>
        $(document).ready(function(){
            if ($(window).width() <= 1200) {
                $("#panel-login").removeClass("in");
            }
        });
    </script>
</head>

Answer 5

試試這個

將“in”類放在html中，如class =“collapse in”

並使用

    if ( $( document ).width() < 768 ) {
        $( '.collapse' ).removeClass( 'in' );
    }

Bootstrap面板：在移動設備上折疊但在桌面上展開，怎么樣？

問題描述

5 個解決方案

解決方案1
3 已采納 2016-02-28 12:30:02

解決方案2
1 2017-07-06 12:33:47

解決方案3
1 2017-11-09 22:18:52

解決方案4
0 2016-02-28 12:28:26

解決方案5
0 2018-03-10 05:55:27

Bootstrap面板：在移動設備上折疊但在桌面上展開，怎么樣？

問題描述

5 個解決方案

解決方案1 3 已采納 2016-02-28 12:30:02

解決方案2 1 2017-07-06 12:33:47

解決方案3 1 2017-11-09 22:18:52

解決方案4 0 2016-02-28 12:28:26

解決方案5 0 2018-03-10 05:55:27

解決方案1
3 已采納 2016-02-28 12:30:02

解決方案2
1 2017-07-06 12:33:47

解決方案3
1 2017-11-09 22:18:52

解決方案4
0 2016-02-28 12:28:26

解決方案5
0 2018-03-10 05:55:27