单击按钮时如何缩短所有div框？

Question

我有以下代码：

JS：

<script type="text/javascript">
    $(document).ready(function(){
        $('[href=#del]').click(function(){
            var myParent = $(this).closest('.box');
            myParent.slideUp(800, function(){
                myParent.remove();
    }); }); });
</script>

CSS：

h1 {
    font-family: Arial;
    font-weight: 300;
    color: #444;
}
a {
    color: #fff;
    font-family: Arial;
    text-decoration:none;
    margin-left: 5px;
}
.box {
    width: 150px;
    height: 300px;
    margin-right: 5px;
}
.box1 {
    background-color: red;
    float: left;
    display: inline-block;
}
.box2 {
    background-color: green;
    float: left;
    display: inline-block;
}
.box3 {
    background-color: blue;
    float: left;
    display: inline-block;
}
.box4 {
    background-color: black;
    float: left;
    display: inline-block;
}
.container {
    width: 660px;
    margin: 50px auto;
}

HTML：

<div class="container">
    <div class="box box1"><a href="#del">Toggle</a></div>
    <div class="box box2"><a href="#del">Toggle</a></div>
    <div class="box box3"><a href="#del">Toggle</a></div>
    <div class="box box4"><a href="#del">Toggle</a></div>
</div>

题：

如何使用上面带有Toggle的锚标签，当单击该锚标签时，所有四个框的大小都会从300px减小到150px？ 我现在拥有的代码只是将其删除，但我需要将其从300px缩小到150px。 并再次单击它应返回300px。

Answer 1

$(document).ready(function () {
    $('[href="#del"]').click(function () {
        var $divs = $(this).closest('.container').find('.box');
        $divs.css({
            'height': '150px'
        });
    });
});

演示---> http://jsfiddle.net/jttwB/3/

动画演示---> http://jsfiddle.net/jttwB/2/

Answer 2

我认为这使您正在寻找的动画。 这将提供同时切换单个或同时切换全部的能力。 如果只需要一种方式，则可以删除一组锚点和关联的jquery。 如果“ toggleAll”出现故障，它将使它们全部恢复..反之亦然。

http://jsfiddle.net/pb6fM/7/

    $(document).ready(function () {
        $('[href=#toggleMe]').click(function () {
            var myParent = $(this).closest('.box');
            var h = "150px";
            if(myParent.height() == "150") { h = "300px"; }
            myParent.animate({
                height: h
            }, 800)
        });
        $('[href=#toggleAll]').click(function () {
            var boxes = $('.box');
            var h = "150px";
            if($(this).closest('.box').height() == "150") { h = "300px"; }
            boxes.animate({
                height: h
            }, 800)
        });
    });

Answer 3

只需取出$（this）.closest部分并添加一个.each。

$('.box').each(function (index, box) {
  $(box).slideUp(800, function() {
     $(box).remove();
   });
});

Answer 4

尝试一下以获得更好的效果... http://jsfiddle.net/KsV2L/

$(document).ready(function(){
    $('[href=#del]').click(function(){
        $(this).closest('.box').animate({height:'150px',width:'0'},800,function(){$(this).remove()});
        $(this).closest('.container').find('.box').animate({height:'150px'},800);
}); });