javascript - Bootstrap panel: collapsed on mobile but expanded on desktop, how? - Stack Overflow

admin管理员组

文章数量:1026381

How can I as simply as possible remove the class "in" from the div with id "panel-login" if the screen are smaller than 1199px (Bootstrap's xs, sm and md modes). I guess some kind of JS or JQuery could solve it but I'm not very good at either.

<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 -->

How can I as simply as possible remove the class "in" from the div with id "panel-login" if the screen are smaller than 1199px (Bootstrap's xs, sm and md modes). I guess some kind of JS or JQuery could solve it but I'm not very good at either.

<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 -->

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Mar 10, 2017 at 14:45 Carol Skelly 362k9191 gold badges735735 silver badges646646 bronze badges asked Feb 28, 2016 at 12:25 Torbjörn Loke NornwenTorbjörn Loke Nornwen 30522 gold badges44 silver badges1313 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 5

This is what I used:

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

You could use a CSS @media query to hide it.. overriding the effect if the .in

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

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

Or, you can use jQuery and watch the resize event like this..

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

HTML

In you panel-heading element just add

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

And in your panel-body element add "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');
        }
})

Once you've added the javascript snippet globally you are able to toogle every panel by just adding the HTML snippet.

To make it collapsed for mobile devices just trigger the collapse() function for mobile devices,like

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

OR you could check if the hamburger menu is visible

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

Try this :

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

Try This

Put "in" class in html like class="collapse in"

and use

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

How can I as simply as possible remove the class "in" from the div with id "panel-login" if the screen are smaller than 1199px (Bootstrap's xs, sm and md modes). I guess some kind of JS or JQuery could solve it but I'm not very good at either.

<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 -->

How can I as simply as possible remove the class "in" from the div with id "panel-login" if the screen are smaller than 1199px (Bootstrap's xs, sm and md modes). I guess some kind of JS or JQuery could solve it but I'm not very good at either.

<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 -->

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Mar 10, 2017 at 14:45 Carol Skelly 362k9191 gold badges735735 silver badges646646 bronze badges asked Feb 28, 2016 at 12:25 Torbjörn Loke NornwenTorbjörn Loke Nornwen 30522 gold badges44 silver badges1313 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 5

This is what I used:

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

You could use a CSS @media query to hide it.. overriding the effect if the .in

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

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

Or, you can use jQuery and watch the resize event like this..

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

HTML

In you panel-heading element just add

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

And in your panel-body element add "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');
        }
})

Once you've added the javascript snippet globally you are able to toogle every panel by just adding the HTML snippet.

To make it collapsed for mobile devices just trigger the collapse() function for mobile devices,like

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

OR you could check if the hamburger menu is visible

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

Try this :

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

Try This

Put "in" class in html like class="collapse in"

and use

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

本文标签： javascriptBootstrap panel collapsed on mobile but expanded on desktophowStack Overflow