單擊按鈕時如何縮短所有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);
}); });