Bootstrap：使用复选框显示/隐藏列 div 并更改列跨度

Question

我正在使用 Bootstrap 3.2。我试图弄清楚是否有一种方法可以显示/隐藏“col-sz-#”div并更改可见div中的“col-sz-#”类以使用复选框样式按钮调整它们的大小以适应容器每一列。

例如，如果我以

开头

<div class="row">
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
</div>

然后如果隐藏其中 2 个并且其他调整大小：

<div class="row">
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-2 hidden">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>

如果总列不能像 5 一样将 12 整除，那么它就不会改变。

Answer 1

你可以这样做：

var $myCols =  $("#myColumns");

$("#toggleColumns input").change(function() {
    var index = +this.value - 1;
    var visible = this.checked;

    $($myCols.children().get(index)).toggle(visible);

    resizeColumns();
});

function resizeColumns() {
    var visibleCols = $myCols.children(":visible").length;

    var div = Math.floor(12 / visibleCols);
    var rem = 12 % visibleCols;

    var colSize = (rem === 0) ? div : 2;

    $myCols.children().removeClass().addClass('col-md-'+colSize);

}

Demo in jsFiddle

更新：

如果您想对多个相同的行进行操作，只需使用选择器找到所有行并在each 行上调用函数：

$(".resizeRow").each(function(){
    var $eachRow = $(this);
    // Do Stuff
});

Updated Fiddle

Answer 2

这就是我解决问题的方法，我改编自 https://codepen.io/feger/pen/deIki。

		$("input:checkbox:not(:checked)").each(function() {
		    var column = "table ." + $(this).attr("name");
		    $(column).hide();
		});

		$("input:checkbox").click(function(){
		    var column = "table ." + $(this).attr("name");
		    $(column).toggle();
		});

		.clearfix:before,.clearfix:after {
		    content: " ";display: table; /* 2 */}
		.clearfix:after {clear: both;}
		.clearfix {*zoom: 1;}

		.options {margin-bottom: 8px;}

		/* Style checkboxes as Toggle Buttons */
		.ck-button {
		    margin:2px;
		    background-color:#EFEFEF;
		    border-radius:4px;
		    border:1px solid #aaa;
		    overflow:auto;
		    float:left;
		    color:#aaa;
		}
		.ck-button:hover {
		    background-color:#ddd;
		}
		.ck-button label {
		    float:left;
		    width:auto;
		    margin-bottom: 0;
		}
		.ck-button label span {
		    text-align:center;
		    padding:3px 8px;
		    display:block;
		}
		.ck-button label input {
		    position:absolute;
		    top:-20px;
		}
		.ck-button input:checked + span {
		    color:#111;
		}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>
<body>
	<div class="options clearfix">
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="first_name" checked="checked"><span>First Name</span></label>
		</div>
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="last_name" checked="checked"><span>Last Name</span></label>
		</div>
		<div class="ck-button">
			<label><input type="checkbox" value="1" name="email"><span>Email</span></label>
		</div>
	</div>

		<table class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr>
				 <th class="first_name">First Name</th>
				 <th class="last_name">Last Name</th>
				 <th class="email">Email</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					 <td class="first_name">Larry</td>
					 <td class="last_name">Hughes</td>
					 <td class="email">larry@gmail.com</td>
				</tr>
				<tr>
					 <td class="first_name">Mike</td>
					 <td class="last_name">Tyson</td>
					 <td class="email">mike@gmail.com</td>
				</tr>
			</tbody>
		</table>

</body>
</html>

Answer 3

看看这个fiddle。在这里，我使用jquery toggle 来显示/隐藏元素。我认为，小提琴对你来说是一个很好的起点。您也可以使用 css（不带 jquery）来执行此操作。然后，你必须设置 display: none 属性。