Bootstrap面板：在移动设备上折叠，在桌面设备上展开，如何实现？

Question

Bootstrap面板：在移动设备上折叠，在桌面设备上展开，如何实现？

5

如果屏幕小于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 -->

- Torbjörn Loke Nornwen

5个回答

4

这是我使用的内容：

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

- createscape

这实际上是最佳解决方案，因为它不涉及任何JavaScript和/或jQuery（sic！）。 - Mike Doe

1

HTML

在您的面板标题元素中添加以下内容：

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

在您的面板主体元素中添加 "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();
}

- Stefan

0

试试这个

在HTML中像这样放置"class"，例如class="collapse in"

然后使用

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

- Rajesh Doot

0

试试这个：

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

- Enrico

到目前为止，我也已经想到了。我无法弄清楚的是如何仅在移动屏幕上调用它。 - Torbjörn Loke Nornwen

是的，我很抱歉，我正在使用手机发帖，对它并没有完全的控制。我进行了一次编辑。这就是你需要的，只需仔细检查自动更正即可。 - Enrico

我已经将那段代码放在custom.js文件中，并在head标签内添加了<script src="custom.js"></script>。但它就是不起作用。 - Torbjörn Loke Nornwen

还尝试将其放入代码中面板之前的<script>标签中，但也不起作用。 - Torbjörn Loke Nornwen

肯定是语法错误。我回家后会检查并纠正它。 - Enrico

2

我发现（感谢Skelly的评论）为什么我的jQuery完全没有效果。当我在加载jQuery之后但在加载Bootstrap js之前放置您的代码时，它像魔法般地工作。谢谢！ - Torbjörn Loke Nornwen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

你可以使用CSS @media查询来隐藏它，如果.in覆盖了该效果，则会被覆盖。

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

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

或者，您可以使用jQuery并监听调整大小事件，像这样...

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