javascript - 单击按钮时，如何使所有 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？我现在拥有的代码只是将其删除，但我需要将框从 300 像素缩小到 150 像素。当再次单击它时，它应该返回到 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。如果您在一个已关闭的设备上“全部切换”，它将使它们全部启动..反之亦然。

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

试试这个以获得更好的效果...... 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);
}); });

Answer 4

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

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