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

Question

我完全不熟悉网络编码，我正在尝试使用 bootstrap 为在线作品集创建艺术项目网格。

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

目前，当我单击文本 'Video' 时，它会根据需要隐藏所有非视频项目，但如果我随后单击 'Photo'，视频项目将隐藏，照片项目将隐藏仍然隐藏，不会显示。

这是我的代码：

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

我希望能够单击 'Video' 并仅显示视频项目，单击 'Photo' 并仅显示照片项目，但我不确定我的做法是否正确；也许需要一些 javascript？

Answer 1

下面是实现显示和隐藏功能的非常基本的 jQuery 解决方案。首先给link分配一个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>

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

Bootstrap 3 collapse (only show specific columns)

collapse

twitter-bootstrap-3