jquery - 关闭另一个div后如何调整div区域

Question

我是 Twitter Bootstrap 框架的新手。

我在主容器中有两个 Div 容器。在具有三个 div 的每个 div 容器中，我在 div 中放置了关闭按钮。当我关闭顶部的 div 时，底部的 div 出现，就像这样，如果我关闭所有的 div，正确的容器应该出现在左侧。

HTML代码

<div id="DashboardCanvas">
 <div class="colDashboard ui-sortable col-one">
  <div id="one"><a id="oneClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="two"><a id="twoClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="three"><a id="threeClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
 </div>
 <div class="colDashboard ui-sortable col-two">
  <div id="four"><a id="fourClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="five"><a id="fiveClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="six"><a id="sixClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
 </div>
</div>

jQuery

$("#oneClose").click(function(e) {
 $("#one").hide();
});

$("#twoClose").click(function(e) {
 $("#two").hide();
});

$("#threeClose").click(function(e) {
 $("#three").hide();
});

$("#fourClose").click(function(e) {
 $("#four").hide();
});

$("#fiveClose").click(function(e) {
 $("#five").hide();
});

$("#sixClose").click(function(e) {
 $("#six").hide();
});

谢谢

Answer 1

哇，你喜欢写代码？如果所有 div 都相同，则使用类...

<div id="DashboardCanvas">
 <div class="colDashboard ui-sortable col-one">
  <div id="one" class="number"><a id="oneClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="two" class="number"><a id="twoClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="three" class="number"><a id="threeClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
 </div>
 <div class="colDashboard ui-sortable col-two">
  <div id="four" class="number"><a id="fourClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="five" class="number"><a id="fiveClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
  <div id="six" class="number"><a id="sixClose"><span class="glyphicon glyphicon-remove-circle"></span></a></div>
 </div>
</div>

和你的 JS

$('.number').each(function(){
  $(this).click(function(){
    // do what you want when element is clicked
  })
});

有关更多信息，如果我单击 div“one”，她会消失吗？