引导 - 网格系统 - 折叠/展开只有一个项目连续

问题描述：

我在一个网格系统上开发，连续几个折叠项目。单击标题或缩略图时会触发折叠。引导 - 网格系统 - 折叠/展开只有一个项目连续

现在的问题是：当我展开一行中的一个项目时，每个其他项目也自动展开，但扩展文本只显示在当前项目中。我想只有1项扩大和休息订购自理的网格系统：

这IMG表明它目前是如何起作用：

这也是我怎么想它采取行动：

这里是我当前的代码小提琴： Fiddle

HTML 1个项目的代码（仅因为需要对小提琴一些代码）：

<div class="flex-container"> 
    <div id="item1" class ="item"> 
    <a data-toggle="collapse" href="#collapse-1" class="collapsed" aria-expanded="false"> 
      <div class="item-body"> 
       <div class="image"> 
        <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">   
       </div> 

       <div class="content">             
      <h3>TEST</h3> 
      <h4>Testmodell 0</h4> 
      <div class="btn-group-vertical buttons" role="group" aria-label="..."> 
        <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
        <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button> 
        </div>         
       </div> 
      </div> 
     </a> 

      <div class="item-footer collapse" id="collapse-1" aria-expanded="false" style="height: 11px;"> 
       <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p> 
     <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p> 
       <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p> 
      </div> 
     </div> 
    </div>

在此先感谢。

编辑： 有没有更新？ :)

这可能适用于CSS Grid，否则你需要一个脚本来解决这个问题。如果CSS网格是一个选项，将'css-grid'添加到您的标签列表 – LGSon

我对任何东西都开放。我也听说过砌体小部件，但我没有经验。 – toffler

好的，我也用脚本更新了您的标签列表，现在只需等待并观看 – LGSon

答

由于flex，您正面临此问题。要解决这个问题，你必须去与其他选项是这样的：

body .flex-container{ 
 
    display:block; 
 
} 
 
.item{ 
 
    background-color: white; 
 
    border:solid 1px #000; 
 
    margin: 5px; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.item .item-body{ 
 
\t display: block; 
 
    position: relative; 
 
    height \t : 50px; 
 
} 
 

 
.item .item-footer{ 
 
\t border-top: 1px solid #000; 
 
    position: relative; 
 
    padding-top: 10px; 
 
    padding-left: 10px; 
 
} 
 

 
.item .item-body .image { 
 
    display: block; 
 
    float: left; 
 
    vertical-align: middle; 
 
    position: relative; 
 
} 
 

 
.item .item-body .image img { 
 
    width: 50px; 
 
    padding-top: 3px; 
 
} 
 

 
.item .item-body .content { 
 
    display: block; 
 
    float: left; 
 
    padding: 0 ; 
 
    margin-left: 10px; 
 
    margin-right: 15px; 
 
} 
 

 
.item .item-body .content h3{ 
 
\t font-size: 1.1em; 
 
\t margin-top: 8px; 
 
\t margin-bottom: 1px; 
 
} 
 

 
.item .item-body .content h4{ 
 
\t font-size: 1em; 
 
\t margin-top: 1px; 
 
\t margin-bottom: 1px; 
 
} 
 

 
.item .item-body .content .buttons{ 
 
    display: block; 
 
    position: absolute; 
 
    top: 3px; 
 
    right: 5px; 
 
} 
 

 
.item a{ 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.flex-container { 
 
\t -js-display: flex; 
 
\t display: flex; 
 
    \t flex-wrap: wrap; 
 
\t height: 100%; 
 
\t min-height: 100px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div id="item1" class ="item"> 
 
    <a data-toggle="collapse" href="#collapse-1" class="collapsed" aria-expanded="false"> 
 
\t \t \t <div class="item-body"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t  <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">   
 
\t \t \t \t </div> 
 
     
 
\t \t \t \t <div class="content"> \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
      <h3>TEST</h3> 
 
      <h4>Testmodell 0</h4> 
 
      <div class="btn-group-vertical buttons" role="group" aria-label="..."> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button> 
 
\t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </a> 
 
     
 
\t \t \t <div class="item-footer collapse" id="collapse-1" aria-expanded="false" style="height: 11px;"> 
 
\t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p> 
 
     <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p> 
 
\t \t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    <div id="item2" class ="item"> 
 
    <a data-toggle="collapse" href="#collapse-2" class="collapsed" aria-expanded="false"> 
 
\t \t \t <div class="item-body"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t  <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">   
 
\t \t \t \t </div> 
 
     
 
\t \t \t \t <div class="content"> \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
      <h3>TEST</h3> 
 
      <h4>Testmodell 1</h4> 
 
      <div class="btn-group-vertical buttons" role="group" aria-label="..."> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button> 
 
\t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </a> 
 
     
 
\t \t \t <div class="item-footer collapse" id="collapse-2" aria-expanded="false" style="height: 11px;"> 
 
\t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p> 
 
     <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p> 
 
\t \t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    <div id="item3" class ="item"> 
 
    <a data-toggle="collapse" href="#collapse-3" class="collapsed" aria-expanded="false"> 
 
\t \t \t <div class="item-body"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t  <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">   
 
\t \t \t \t </div> 
 
     
 
\t \t \t \t <div class="content"> \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
      <h3>TEST</h3> 
 
      <h4>Testmodell 2</h4> 
 
      <div class="btn-group-vertical buttons" role="group" aria-label="..."> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button> 
 
\t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </a> 
 
     
 
\t \t \t <div class="item-footer collapse" id="collapse-3" aria-expanded="false" style="height: 11px;"> 
 
\t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p> 
 
     <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p> 
 
\t \t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    <div id="item4" class ="item"> 
 
    <a data-toggle="collapse" href="#collapse-4" class="collapsed" aria-expanded="false"> 
 
\t \t \t <div class="item-body"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t  <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">   
 
\t \t \t \t </div> 
 
     
 
\t \t \t \t <div class="content"> \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
      <h3>TEST</h3> 
 
      <h4>Testmodell 3</h4> 
 
      <div class="btn-group-vertical buttons" role="group" aria-label="..."> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button> 
 
\t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </a> 
 
     
 
\t \t \t <div class="item-footer collapse" id="collapse-4" aria-expanded="false" style="height: 11px;"> 
 
\t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p> 
 
     <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p> 
 
\t \t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    <div id="item5" class ="item"> 
 
    <a data-toggle="collapse" href="#collapse-5" class="collapsed" aria-expanded="false"> 
 
\t \t \t <div class="item-body"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t  <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">   
 
\t \t \t \t </div> 
 
     
 
\t \t \t \t <div class="content"> \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
      <h3>TEST</h3> 
 
      <h4>Testmodell 4</h4> 
 
      <div class="btn-group-vertical buttons" role="group" aria-label="..."> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button> 
 
\t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </a> 
 
     
 
\t \t \t <div class="item-footer collapse" id="collapse-5" aria-expanded="false" style="height: 11px;"> 
 
\t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p> 
 
     <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p> 
 
\t \t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    <div id="item6" class ="item"> 
 
    <a data-toggle="collapse" href="#collapse-6" class="collapsed" aria-expanded="false"> 
 
\t \t \t <div class="item-body"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t  <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">   
 
\t \t \t \t </div> 
 
     
 
\t \t \t \t <div class="content"> \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
      <h3>TEST</h3> 
 
      <h4>Testmodell 5</h4> 
 
      <div class="btn-group-vertical buttons" role="group" aria-label="..."> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
 
\t \t \t \t <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button> 
 
\t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </a> 
 
     
 
\t \t \t <div class="item-footer collapse" id="collapse-6" aria-expanded="false" style="height: 11px;"> 
 
\t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p> 
 
     <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p> 
 
\t \t \t \t <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</div>

您还可以检查更新Single column fiddle

或者您也可以使隐藏的div绝对喜欢这个Two column fiddle

感谢您的快速响应。我已经想过这样的解决方案。但问题是，我有大约30个项目需要管理 - 因此我需要连续排列其中的几个项目，否则会让人感到困惑。任何想法如何实现？ – toffler

在这种情况下，你可以使用这样的东西 - https://jsfiddle.net/53wx9yjr/2/ – kravisingh

几乎所需的结果。我只面对这个解决方案的另一个问题。用户无法阅读例如项目1和3的信息，因为内容重叠。我真的很喜欢像网格布局这样的想法，根据可用的垂直空间将项目放置在最佳位置。（如第二张图）。但我不知道是否有一个简单的解决方案。 – toffler

引导 - 网格系统 - 折叠/展开只有一个项目连续

相关推荐