Bootstrap 3 折叠（仅显示特定列）

Question

我完全是网络编码的新手，我正在尝试使用引导程序为在线作品集创建一个艺术项目网格。

我正在尝试在单击相关按钮时使特定列显示在网格上。

目前，当我单击文本“视频”时，它会根据需要隐藏所有不是视频项目的内容，但如果我随后单击“照片”，则视频项目将隐藏，而照片项目仍将被隐藏并获胜不显示。

这是我的代码：

<div class="jumbotron text-center">
  <a href=".novideotag" class="btn tagbtn" data-toggle="collapse">Video</a> |
  <a href=".nophototag" class="btn tagbtn" data-toggle="collapse">Photo</a>
</div>

<div class="container-fluid">
  <div class="row-fluid text-center">
    <div class="collapse in col-xs-6 col-sm-4 col-md-3 novideotag">
      <p>example: photo project 1</p>
    </div>
    <div class="collapse in col-xs-6 col-sm-4 col-md-3 nophototag">
      <p>example: video project 1</p>
  </div>
</div>

我希望能够单击“视频”并仅显示视频项目，单击“照片”并仅显示照片项目，但我不确定我是否以正确的方式进行；也许需要一些 javascript？

Answer 1

下面是一个非常基本的 jQuery 解决方案，用于实现显示和隐藏功能。首先给链接分配一个ID，使用jQuery的click()方法来发起点击事件。 e.preventDefault() 用于覆盖浏览器的默认点击行为。

要实现显示和隐藏，请调用show(), hide() 或slideUp(), slideDown() 方法。有很多方法可以做到这一点。但这是替代方案之一。

$('#video').click(function(e) {
  e.preventDefault();
  $('.novideotag, .design').slideUp();
  $('.nophototag').slideDown();
});

$('#photo').click(function(e) {
  e.preventDefault();
  $('.nophototag, .design').slideUp();
  $('.novideotag').slideDown();

});

$('#design').click(function(e) {
  e.preventDefault();
  $('.nophototag, .novideotag').slideUp();
  $('.design').slideDown();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
  <a href="#novideotag" class="btn tagbtn" data-toggle="collapse" id="video">Video</a> |
  <a href="#nophototag" class="btn tagbtn" data-toggle="collapse" id="photo">Photo</a> |
  <a href="#design" class="btn tagbtn" data-toggle="collapse" id="design">Design</a>
</div>

<div class="container-fluid">
  <div class="row-fluid text-center">
    <div class="collapse in col-xs-4 col-sm-4 col-md-4 novideotag">
      <img src="http://placehold.it/200x200" />
      <p>example: photo project 1</p>
    </div>
    <div class="collapse in col-xs-4 col-sm-4 col-md-4 nophototag">
      <img src="http://placehold.it/200x200" />
      <p>example: video project 1</p>
    </div>
    <div class="collapse in col-xs-4 col-sm-4 col-md-4 design">
      <img src="http://placehold.it/200x200" />
      <p>example: Design Project</p>
    </div>
  </div>