桌面端默认显示Bootstrap手风琴，移动端默认隐藏

Question

桌面端默认显示Bootstrap手风琴，移动端默认隐藏

javascripthtmlcssbootstrap-4

5

我对Bootstrap比较新，不确定应该如何处理。

我有一个简单的Bootstrap手风琴，就像这个片段中的一样。它分成多个手风琴，因为我希望它们能够独立地展开和折叠。（即可以展开并显示所有项目或不显示任何项目，而不仅仅是一个展开，其他项目折叠）

我想在桌面上禁用展开和折叠，并确保每个项目都显示。但是在移动设备上，我只想默认显示第一个项目，并使其他项目折叠。

您有任何建议吗？非常感谢。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading1">
      <button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1">
        //heading
      </button>
    </div>
    <div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
      <div class="product card-body">
        //content
      </div>
    </div>
  </div>
</div>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading2">
      <button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2">
        //heading
      </button>
    </div>
    <div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
      <div class="product card-body">
        //content
      </div>
    </div>
  </div>
</div>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading3">
      <button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3">
        //heading
      </button>
    </div>
    <div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion">
      <div class="product card-body">
        //content
      </div>
    </div>
  </div>  
</div>

- Paddy Hallihan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jqueryHub · Accepted Answer

我已经找到了解决方案，请查看以下内容。 桌面端的 CSS

.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%; 
 height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}

移动端 CSS

@media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}

HTML结构

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="card-body">Contect-1</div>
    </div>
  </div>
</div>

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
      <div class="card-body">Content-2</div>
    </div>
  </div>
</div>

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3</button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
      <div class="card-body">Content-3</div>
    </div>
  </div>
</div>