javascript - Bootstrap Collapse - 单击关闭其他

Question

我正在为这 3 个按钮使用 Bootstrap/Collapse。可以直播看here - 那 3 个黄色按钮。当我点击第一个按钮然后点击第二个按钮时，我想通过点击第二个关闭第一个 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 以实现确切的功能。