引導面板：在移動設備上摺疊，但在桌面上展開，如何？

如果屏幕小於1199像素（引導程序的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 -->

來源

2016-02-28 Torbjörn Loke Nornwen

你可以使用一個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

來源

2016-02-28 12:30:02 ZimSystem

我試過了。它確實隱藏了手機屏幕上的面板，但它也阻止了當我單擊摺疊按鈕時再次顯示該面板。我希望當頁面首次加載時（在移動設備上）隱藏它，但仍然可以崩潰。 –

是的，那麼唯一的辦法就是用jQuery。查看第二個演示 – ZimSystem

我查看了你的代碼。它按照預期的那樣工作。這個代碼與我在例子中看到的代碼非常相似，因此在發佈之前試圖研究答案。但是，它不適用於我的項目。任何想法，我可能會錯過？ –

試試這個：

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

來源

2016-02-28 12:28:26 Enrico

說遠我已經想通爲好。我無法想象的是如何僅在手機屏幕上調用它。 –

是的，我很抱歉，我是從我的手機發帖，而我並沒有完全控制這件事。我做了一個編輯。這就是你需要的，只需要雙重檢查它的自動更正 – Enrico

我已經把這個代碼放在custom.js中，並在head標籤內部添加了。它只是不會工作。 –

HTML

在您面板的標題元素只是添加

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

並在您的面板主體元素添加「崩潰」：

<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代碼段，以每天的toogle面板。

爲了使它倒塌的移動設備只是觸發的移動設備collapse()功能，如

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

，或者你可以檢查，如果漢堡包菜單可見

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

來源

2017-07-06 12:33:47 Phil

這是我用什麼：

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

來源

2017-11-09 22:18:52

這實際上是最好的解決方案，因爲它不涉及任何JavaScript和/或jquery（原文如此！） –

試試這個

PUT 「中的」類像類= HTML 「崩潰」

，並使用

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

來源

2018-03-10 05:55:27

引導面板：在移動設備上摺疊，但在桌面上展開，如何？

回答

相關問題