0

コード：

    <script>
$(document).ready(function() {

  $('.boxes').on('click', function(e){
    e.preventDefault();
    var $btn = $(this);
    $btn.toggleClass('opened');

    var heights = $btn.hasClass('opened') ? 300 : 100 ;
    $('.boxes').stop().animate({height: heights });
  });
});
    </script>

クラスを持つ18個のボックスがありboxesます。.boxes をクリックすると想像できるように、18 個のボックスすべてが開いたり閉じたりします。私がやりたいことは、すべてのボックスではなく、クリックされたボックスだけが開閉するようにすることです。18 個のボックスには、box1、box2、box3 などの一意の ID があります。

私はJSが初めてなので、論理的な解決策は上記のコードを18回繰り返し、ボックスに固有のIDを使用することですが、それはコードの繰り返しが多すぎることを知っています。では、すべてのボックスではなく、クリックされたボックスだけが開閉するようにするにはどうすればよいでしょうか? どんなヒントでも役に立ちます。ありがとう！

4

3 に答える 3

1

に変更できません$('.boxes')か$btn？これにより、クリックされたボックスのみがアニメーション化されます。

$btn.stop().animate({height: heights });
^^^^
于 2013-09-05T19:49:19.887 に答える
1

編集：今すぐ試してみてください。

$(".boxes").on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('opened');
    var heights = $(this).hasClass('opened') ? 300 : 100 ;

    $(this).stop().animate({height: heights}); //Show clicked box
});

JSFiddle

于 2013-09-05T19:50:37.600 に答える
0

$('.boxes').stop().animate({height: heights });に変更

$(this).stop().animate({height: heights });

選択したボックスのみを切り替えます。フィドルをチェックしてください http://jsfiddle.net/xSNYc/

于 2013-09-05T20:08:33.207 に答える