如何使面板僅在手機上摺疊

根據此示例，我想讓它僅在手機上摺疊。在平板電腦和臺式機上，它應該正常啓動。如何使面板僅在手機上摺疊

<style> 
.panel-heading a:after { 
    font-family:'Glyphicons Halflings'; 
    content:"\e114"; 
    float: right; 
    color: grey; 
} 
.panel-heading a.collapsed:after { 
    content:"\e080"; 
} 
</style> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default" id="panel1"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
     <a data-toggle="collapse" data-target="#collapseOne" 
      href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 

     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> 
     </div> 
    </div> 
</div> 
<!-- Post Info --> 
<div style='position:fixed;bottom:0;left:0;  
      background:lightgray;width:100%;'>Based off this SO Question: <a href='http://stackoverflow.com/a/11658976/1366033'>Keep Bootstrap Grid Open</a> 

    <br/>Based off this SO Question: <a href='http://stackoverflow.com/a/18568997/1366033'>Show Collapse state with Chevron Icon</a> 

    <br/>Find documentation: <a href='http://getbootstrap.com/javascript/#collapse-usage'>Bootstrap Collapse Usage</a> 

    <br/>Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a> 

    <br/> 
    <div>

http://jsfiddle.net/Wc4xt/1052/

來源

2014-12-09 claudioivp

首先你必須檢測設備，看到這裏：http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in- jquery，然後刪除class'in'以摺疊collapseone。因此，如下所示：'if（/ Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/i.test（navigator.userAgent））{（「#collapseOne」）.removeClass（「in 「）; }' – scraaappy 2014-12-09 13:54:40

你可以有在給定的屏幕寬度僅針對移動設備（屏幕MD）有些虛脫：

@media (min-width: @screen-md) 
{ 
    #targetID 
    { 
     display: block; 
    } 
}

的按鈕展開#targetID才成爲一次媒體可見查詢不再適用。

<button type="button" data-toggle="collapse" data-target="#targetID" class="visible-xs visible-sm collapsed">Filter</button> 

<div id="targetID" class="collapse">...</div>

來源

2014-12-09 13:42:51 mijopabe

如何使面板僅在手機上摺疊

回答

相關問題