bootstrap 手風琴默認顯示在桌面上，默認隱藏在移動設備上

Question

我是引導程序的新手，所以我不確定我會怎么做。

我有一個簡單的引導手風琴，就像在這個片段中一樣。 它被分成多個手風琴，因為我希望它們能夠彼此獨立地展開和折疊。 （因為可以展開並顯示所有項目或不顯示所有項目，而不僅僅是一個展開而其他項目折疊）

我想禁用桌面上的展開和折疊，並確保顯示每個項目。 但是在移動設備上，我只想顯示第一個項目，默認情況下其他項目折疊。

任何關於我如何實現這一目標的建議將不勝感激。

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

Answer 1

我已經找到了解決方案，請查看下面

桌面版 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>