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

我有以下代码：

JS:

HTML:

问题:

我如何使用一个带有开关的锚定标签，当点击它时，所有四个框的大小将从高度300px减小到150px？我现在的代码只是删除它，但我需要它把盒子从300px缩小到150px。当再次点击它时，它应该返回到300px

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

演示

-->

用动画演示

-->

演示

-->

---

用动画演示

-->

我认为这是你想要的动画。这将提供切换单个或同时切换所有的功能。如果只需要一种方式，可以删除一组锚和关联的jquery。如果你在一个失败的人身上“拼凑”，那么他们都会成功。。反之亦然

---

我认为这是你想要的动画。这将提供切换单个或同时切换所有的功能。如果只需要一种方式，可以删除一组锚和关联的jquery。如果你在一个失败的人身上“拼凑”，那么他们都会成功。。反之亦然

只需取出$（this）.最近的部分，然后分别添加一个.each

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

只需取出$（this）.最近的部分，然后分别添加一个.each

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

---

试试这个效果更好

---

试试这个效果更好

---

---

谢谢我该怎么做呢？因此，如果它在150，有人再次点击，我想让它回到300，反之亦然。谢谢谢谢但是使用它会阻止我使用.slideUp。如何使用slideup？我对使用slideup来减缓效果感兴趣。@星巴克当您使用相同的锚向上滑动盒子和更改高度时，您将只能看到slideup效果，这将隐藏.box，如果你解释一下你想要的效果，我可以帮你。当点击切换按钮时，它会产生滑动效果。我需要将速度降低到800，就像他/她使用slideUP时那样。谢谢！我该怎么做呢？因此，如果它在150，有人再次点击，我想让它回到300，反之亦然。谢谢谢谢但是使用它会阻止我使用.slideUp。如何使用slideup？我对使用slideup来减缓效果感兴趣。@星巴克当您使用相同的锚向上滑动盒子和更改高度时，您将只能看到slideup效果，这将隐藏.box，如果你解释一下你想要的效果，我可以帮你。当点击切换按钮时，它会产生滑动效果。我需要将速度减慢到800，类似于使用slideUP时的方式。我不确定您想要什么，我提供了3种不同的选择。希望其中一个对你有用。我看到你刚刚编辑了你的文章，我的最后一个例子做了你想要的（我想）我不确定你想要什么，我提供了3种不同的选择。希望其中一个对你有用。我看到你刚刚编辑了你的文章，我的最后一个例子做了你想要的（我想）谢谢，但我实际上需要一个链接到它的所有人。这就是我需要的：我想这是你想要的动画$（“#slideEmUp”）。单击（函数（）{$（“.box”）。设置动画（{height:'150px'}，800}）；每个盒子里都有锚。。。如果你只想让他们在150和300之间切换，这里是。。。谢谢这很好，但是当它再次点击时，我如何使它回到300？哪一个？你的小提琴都没有。对不起，我接错了。但由于某些原因，它在我的网站上不起作用。我照着你的样子复制，除了开关我想出了一个解决办法。我怎样才能创建另一个只有一个div的div，一旦单击，它就会改变宽度和高度？谢谢，但实际上我需要一个链接来链接所有div。这就是我需要的：我想这是你想要的动画$（“#slideEmUp”）。单击（函数（）{$（“.box”）。设置动画（{height:'150px'}，800}）；每个盒子里都有锚。。。如果你只想让他们在150和300之间切换，这里是。。。谢谢这很好，但是当它再次点击时，我如何使它回到300？哪一个？你的小提琴都没有。对不起，我接错了。但由于某些原因，它在我的网站上不起作用。我照着你的样子复制，除了开关我想出了一个解决办法。我如何创建另一个只包含一个div的div，然后单击它可以更改宽度和高度？

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

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

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

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