javascript - 使用按钮过滤可见/隐藏的 Bootstrap 列

Question

有任何 JQuery 帮助可以在点击按钮上显示/隐藏 Bootstrap 列吗？

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