javascript - bootstrap - 网格系统 - 仅折叠/展开连续 1 个元素

Question

我正在开发一个网格系统，其中有几个连续折叠的元素。单击标题或缩略图时会触发折叠。

现在的问题是:当我展开一行中的 1 个元素时，所有其他元素也会自动展开，但展开的文本仅显示在当前元素中。我只想扩展 1 个元素，其余元素在网格系统中自行排序:

此图片显示了它当前的行为方式:

这就是我希望它发挥作用的方式:

这是我当前代码的一个 fiddle : Fiddle

1 项的 HTML 代码(仅因为 fiddle 需要一些代码):

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

提前致谢。

编辑:任何更新？ :)

Answer 1

由于 flex，您面临此问题。要解决此问题，您必须使用其他选项，如下所示:

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

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

.item .item-footer{
	  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{
	font-size: 1.1em;
	margin-top: 8px;
	margin-bottom: 1px;
}

.item .item-body .content h4{
	font-size: 1em;
	margin-top: 1px;
	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 {
	-js-display: flex;
	 display: flex;
 	flex-wrap: wrap;
	height: 100%;
	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">
			<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 id="item2" class ="item">
     <a data-toggle="collapse" href="#collapse-2" 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 1</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-2" 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 id="item3" class ="item">
     <a data-toggle="collapse" href="#collapse-3" 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 2</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-3" 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 id="item4" class ="item">
     <a data-toggle="collapse" href="#collapse-4" 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 3</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-4" 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 id="item5" class ="item">
     <a data-toggle="collapse" href="#collapse-5" 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 4</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-5" 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 id="item6" class ="item">
     <a data-toggle="collapse" href="#collapse-6" 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 5</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-6" 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>

您还可以查看更新后的Single column fiddle

或者你可以像这样使隐藏的div绝对化Two column fiddle