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>

问题：

如何使用一个在其上有切换的锚标签，当点击它时，所有四个框的尺寸将从高度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);
}); });

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

4 个答案: