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

时间:2013-12-19 08:14:07

标签: jquery css twitter-bootstrap

我是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();
});

由于

1 个答案:

答案 0 :(得分:1)

哇,你喜欢写代码吗?如果所有div都相同,请使用class ...

<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”,她会消失吗?