Question

<div class="wrapper">
  <div class="box1">
     <p>Content Here</p>
     <button type="button" class="close">Close Box1</button>
  </div>

  <div class="box2">
     <p>Content Here</p>
     <button type="button" class="close">Close Box2</button>
  </div>
  <div class="box3">

     <p>Content Here</p>
     <button type="button" class="close">Close Box3</button>
  </div>

</div>

http://jsfiddle.net/isherwood/KeChx

我尝试使用twitter bootstrap alert dismiss但它只关闭了第一个外部div标签，例如，关闭按钮在box1内，我想关闭外部div.wrapper。

我所追求的是能够单独关闭/解散box1，box2，box3，一旦所有这些都关闭/解散，div.wrapper也将自动被解雇..

任何想法我怎么能得到这个？

我试着在这里搜索，但我找到的大多数是一个具有关闭功能的弹出窗口，这不是我需要的，因为这些盒子不需要弹出..

先谢谢你们

Answer 1

你可以让data-dismiss处理一个非模态元素，但是你自己的jQuery函数也很容易：

http://jsfiddle.net/isherwood/KeChx/6

$('.close').click(function () {
    $(this).parent('div').slideUp();
});

在这种情况下，没有理由在父元素为空时将其解除，但你当然可以这样：

$('.close').click(function () {
    $(this).parent('div').slideUp();

    if (! $('.wrapper > div') ) {
        $('.wrapper').hide();
    }
});

以下是上述行动的一个例子。如果孩子的数量低于2，我已将其设置为关闭父.wrapper。

http://jsfiddle.net/isherwood/KeChx/8

function closeEmptyWrapper() {
    var divCt = $('.wrapper').find('div').not(':hidden').size();

    if (divCt < 2) {
        $('.wrapper').fadeOut();
    }
}

$('.close').click(function () {
    $(this).parent('div').slideUp('', closeEmptyWrapper);
});

解雇divs，当所有被解雇时，包装器被自动解雇

1 个答案: