Bootstrap折疊-單擊關閉其他

Question

我正在為這3個按鈕使用Bootstrap /折疊。 您可以在此處看到它-那三個黃色按鈕。 當我單擊第一個按鈕，然后單擊第二個按鈕時，我想通過單擊第二個按鈕來關閉第一個div。 您能幫我怎么做？

這是一些支持代碼：

<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#price" aria-expanded="false" aria-controls="price">Podle ceny</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#manufacturers" aria-expanded="false" aria-controls="manufacturers">Podle značky</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#13" aria-expanded="false" aria-controls="13">Podle velikosti</a>

<ul>
  <li data-type="price" data-base-type="price" data-id="price" data-seo-name="price" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-price mfilter-price collapse" id="price">
  ...
  </li>
  <li data-type="checkbox" data-base-type="manufacturers" data-id="manufacturers" data-seo-name="manufacturers" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-manufacturers collapse" id="manufacturers">
  ...
  </li>
  <li data-type="checkbox" data-base-type="option" data-id="13" data-seo-name="13o-velikost" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-option mfilter-options collapse" id="13">
  ...
  </li>
</ul>

Answer 1

實現所需輸出的一種方法是使用jquery。 我已經通過使用此處編寫的腳本實現了類似的功能。 您可以在系統上運行並查找效果。

`<script>` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js</script>`

`<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $('#button1').html("<p>"+"hello"+"</p>");
  })
  $("#button2").click(function(){
    $('#button2').html("<li>"+"hello"+"</li>");
    $('p').hide();
  })
  $("#button3").click(function(){
    $('#button3').html("<li>"+"hello"+"</li>");
  $('#button2').find('li').hide();
  })
})
</script>`

在HTML代碼的body標簽內附加id為button1，button2和button3的三個按鈕。

現在要獲得確切的功能，請替換類名和ID以實現確切的功能。