Question

如何保持list-group设备大小desktop(md)开放。截至目前，它在平板电脑和移动屏幕尺寸方面运行良好。我希望所有展开的div's展开desktop屏幕大小。

这是DEMO

只是为了说清楚：

/*Extra small devices Phones (<768px)*/
@media only screen and (min-width:768px){
   .......work as it is
}

/*Small devices Tablets (≥768px)*/  
@media only screen and (max-width:768px){
    .......work as it is
}
/*Medium devices Desktops (≥992px)*/    
@media only screen and (max-width:992px){
    ....need the new behavior
}

像这样：

Expand
 Color
  Black
  White
 Size
  S
  M
 Fabric
  Cotton
  Lycra

这是我正在处理的代码

<div id="MainMenu" class="container">
    <div class="list-group panel">
        <a href="#demo3" style="color:black" class="list-group-item strong" data-toggle="collapse" data-parent="#MainMenu">Expand<span class="plussign" style="color:#DC5034"><i class="fa fa-caret-down"></i></span></a>
        <div class="collapse in" id="demo3">
            <a href="#SubMenu6" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu6">Color<span class="plussign"><i class="fa fa-plus"></i></span></a>
            <div class="collapse in list-group-submenu" id="SubMenu6">
                <div class="checkbox">
                    <label><input type="checkbox" value="">Black</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="">White</label>
                </div>

            </div>
            <a href="#SubMenu2" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu2">Size<span class="plussign"><i class="fa fa-plus"></i></span></a>
            <div class="collapse in list-group-submenu" id="SubMenu2">
                <div class="checkbox">
                    <label><input type="checkbox" value="">S</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="">M</label>
                </div>

            </div>
            <a href="#SubMenu3" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu3">Fabric<span class="plussign"><i class="fa fa-plus"></i></span></a>
            <div class="collapse in list-group-submenu" id="SubMenu3">
                <div class="checkbox">
                    <label><input type="checkbox" value="">Cotton</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="">Lycra</label>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

将.in添加到#demo3

如：<div class="collapse in" id="demo3">

这将显示默认展开的列表（但如果需要，它仍然可以折叠）

<强>更新

基于评论：

＆＃13;

// Wrap everything in an IIFE
$(window).resize(function() {
  // Executes in MD and LG breakpoints
  if ($(this).width() >= 992) {
    // expand collapsible toggle in demo3 (add other selectors as needed)
    $("#demo3").addClass('in');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div id="MainMenu" class="container">
  <div class="list-group panel">
    <a href="#demo3" style="color:black" class="list-group-item strong" data-toggle="collapse" data-parent="#MainMenu">Expand<span class="plussign" style="color:#DC5034"><i class="fa fa-caret-down"></i></span></a>
    <div class="collapse" id="demo3">
      <a href="#SubMenu6" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu6">Color<span class="plussign"><i class="fa fa-plus"></i></span></a>
      <div class="collapse list-group-submenu" id="SubMenu6">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Black</label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">White</label>
        </div>

      </div>
      <a href="#SubMenu2" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu2">Size<span class="plussign"><i class="fa fa-plus"></i></span></a>
      <div class="collapse list-group-submenu" id="SubMenu2">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">S</label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">M</label>
        </div>

      </div>
      <a href="#SubMenu3" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu3">Fabric<span class="plussign"><i class="fa fa-plus"></i></span></a>
      <div class="collapse list-group-submenu" id="SubMenu3">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Cotton</label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Lycra</label>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

保持列表组打开桌面 - 引导程序

1 个答案: