Как сделать все поля 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 на нем, и когда он будет нажат, все четыре поля уменьшатся в размере от высоты 300 пикселей до 150 пикселей? Код, который у меня есть прямо сейчас, просто удаляет его, но мне нужно его, чтобы уменьшить размер поля до 150 пикселей с 300 пикселей. и при повторном нажатии он должен вернуться к 300px.

Answer 1

Я думаю, что это одушевленные то, что вы ищете. Это обеспечит как возможность переключения одного, так и одновременного переключения. Если вам это нужно только в одном направлении, вы можете удалить один набор якорей и связанный с ним 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 2

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

Demo --->http://jsfiddle.net/jttwB/3/

Демо с анимацией --->http://jsfiddle.net/jttwB/2/

Answer 3

Просто достаньте $ (это) .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); 
}); });