Question

我怎样才能尽可能地删除＆＃34;＆＃34;来自div的id＆＃34; panel-login＆＃34;如果屏幕小于1199px（Bootstrap＆x; xs，sm和md模式）。我想某种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

在面板标题元素中添加

<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

试试这个

将＆＃34;放入＆＃34; html中的类，如class =＆＃34;在＆＃34;

中折叠

并使用

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

Bootstrap面板：在移动设备上折叠但在桌面上展开，怎么样？

5 个答案: