0

例図

したがって、テーブルセル内に2つのdivがあります。1 div が上で 1 が下です。一番下の div は見えないので、一番上の div はテーブル セルの高さ全体を占めます。ボタンをクリックすると、一番下の div が表示され、一番上の div の高さが縮小されて、一番下の div 用のスペースが確保されます。ボタンをもう一度クリックすると、下の div が非表示になり、上の div がセルの高さになります。

これは私が持っているものですが、失敗です：

 $('#button').click(function(){

   $('#bottomdiv').toggle(function(){
      $("#topdiv").animate({height:250},200);
   },function(){
      $("#topdiv").animate({height:400},200);
   });

});

助けてくれてありがとう、jsfiddleデモは大歓迎です！

4

2 に答える 2

1

あなたは近いです-「クリック」ハンドラーを「トグル」に変更するだけでよいと思います。例: (JS フィドル)

jQuery(document).ready(function($) {
     $('#button').toggle(function () {
         // Show bottom
         $("#topdiv").animate({
             height: 400
         }, 200);
         $("#bottomdiv").slideUp();
         //console.log("bottom shown:", $("#bottomdiv"));
     }, function () {
         // Hide bottom
         $("#topdiv").animate({
             height: 250
         }, 200);
         $("#bottomdiv").slideDown();
         //console.log("bottom hidden:", $("#bottomdiv"));
     });
});
于 2012-09-17T12:55:08.863 に答える
0 
$('body').on('click', '#button', function(){
  $('#topdiv').animate({
    height : '250px'
  }, {
     duration : 200,
     complete : function(){
       $('#bottomdiv').animate({
          height: '400px'
       }, 200);
     }
  });
});
于 2012-09-17T12:51:47.203 に答える