Question

在点击按钮上显示/隐藏引导列的任何JQuery帮助？

<div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn btn-default">Category1</button>
   <button type="button" class="btn btn-default">Category2</button>
   <button type="button" class="btn btn-default">Category3</button>
</div>

这应控制动画过渡中的可见列

<div class="row">
<!-- Category1 -->
<div class="col-lg-4">
...
</div>
<!-- Category2 -->
<div class="col-lg-4">
...
</div>
<!-- Category2 -->
<div class="col-lg-4">
...
</div>
</div>

Answer 1

尝试使用JQuery在按钮单击时切换隐藏/显示相应类别DIV。

JQuery toggle()函数切换元素的显示属性。

$(document).ready(function() {

    $('.btn-group').on('click', 'button', function() {
        var $btn = $(this);
        var categoryId = $btn.data('categoryId');
        $('#' + categoryId).toggle();
    });
});

在每个按钮上添加类别div的相应id作为数据属性。

完整的示例代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
       $(document).ready(function() {

		$('.btn-group').on('click', 'button', function() {
			var $btn = $(this);
			var categoryId = $btn.data('categoryId');
			$('#' + categoryId).toggle();
		});
	});
</script>

<div class="btn-group" role="group" aria-label="...">
		<button type="button" class="btn btn-default" data-category-id="Category1">Category 1</button>
		<button type="button" class="btn btn-default" data-category-id="Category2">Category 2</button>
		<button type="button" class="btn btn-default" data-category-id="Category3">Category 3</button>

		<div class="row">
			<!-- Category1 -->
			<div class="col-lg-4" id="Category1">Category 1</div>
			<!-- Category2 -->
			<div class="col-lg-4" id="Category2">Category 2</div>
			<!-- Category3 -->
			<div class="col-lg-4" id="Category3">Category 3</div>
		</div>
	</div>

Answer 2

我可以使用Isotope找到Codepen样本。就像我需要的那样。

<div id="filters" class="button-group">
  <button class="btn btn-primary" data-filter="*">show all</button>
  <button class="btn btn-primary" data-filter=".web">WEB</button>
  <button class="btn btn-primary" data-filter=".design">DESIGN</button>
</div>

<div class="container-fluid no-gutter">

    <div id="posts" class="row">
        <div id="1" class="item web col-sm-3">
            <div class="item-wrap">
                <img class="img-responsive" src="//lorempixel.com/600/600">
            </div>
        </div>
        <div id="2" class="item web col-sm-3">
            <div class="item-wrap">
                <img class="img-responsive" src="//lorempixel.com/600/600/nature">
            </div>
        </div>
        <div id="3" class="item design col-sm-3">
            <div class="item-wrap">
                <img class="img-responsive" src="//lorempixel.com/600/600/people/1">
            </div>
        </div>
        <div id="4" class="item design col-sm-3">
            <div class="item-wrap">
                <img class="img-responsive" src="//lorempixel.com/600/600/technics">
            </div>
        </div>
        <div id="5" class="item web col-sm-3">
            <div class="item-wrap">
                <img class="img-responsive" src="//lorempixel.com/600/600/transport/1">
            </div>
        </div>
        <div id="6" class="item design col-sm-3">
            <div class="item-wrap">
                <img class="img-responsive" src="//lorempixel.com/600/600/sports">
            </div>
        </div>
        <div id="7" class="item web col-sm-3">
            <div class="item-wrap">
              <img class="img-responsive" src="//lorempixel.com/600/600/business/1">
            </div>
        </div>
        <div id="8" class="item design col-sm-3">
            <div class="item-wrap">
              <img class="img-responsive" src="//placekitten.com/600/600" title="Can you believe it??">
            </div>
        </div>
    </div>
</div>

以下是代码：http://codepen.io/bmodena/pen/Fybdu

使用按钮过滤可见/隐藏的引导列

2 个答案: