2

これは、上下にスライドする必要がある場合にうまく機能しますが、私のCSSのために、上にあるときに二重の境界線があります。だから私はメインのCSSで上の境界線を取り出してスライドの後に追加しようとしましたが、誰かが再びトグルしてもまだそこにあります。最初の位置（上にあるとき）に境界線の上部がなく、2番目の位置にあるとき（下にあるとき）に境界線の上部があるようにするにはどうすればよいですか。これが私のコードです

$('.product').click(function() {
  $('.info').slideToggle('slow', function() {
    $('.product').css( "border-top","1px solid #000" );
  });
});
4

4 に答える 4

3

デモ jsBin

$('.product').toggle(function() {
    $('.info').stop(1).slideDown('slow');
    $(this).css( "border-top","1px solid #000" );
}, function(){
    $('.info').stop(1).slideUp('slow');
    $(this).css( "border-top","1px solid transparent" );
});

以前.stop(1)はいくつかのアニメーション キューをクリアしていました。

于 2012-05-09T07:40:12.130 に答える
0 
$('.product').click(function() {
  $('.info').slideToggle('slow', function() {
      $('.product').css( "border-top","1px solid #000" );
      if(!$('.info').is(':visible')) $('.product').css( "border-top","1px solid transparent" );
  });
});

デモ

于 2012-05-09T07:50:42.273 に答える
0

それぞれの境界線を持つ 2 つの css クラスを作成することで、 jquerytoggleClassを使用できます。必要に応じて切り替えます

例

$('.product').click(function() {
  $('.info').slideToggle('slow', function() {
    $('.product').toggleClass('addBorder');
  });
});​

jsfiddle で実際の例を確認できます

于 2012-05-09T07:40:04.283 に答える
0

まあ、jqueryで遊ぶのは楽しいです:)

ここに私の小さな実験があります：

$('.product').click(function() {
    if($('.toggled').length > 0){
      $('.info').slideToggle('slow', function() {
        $('.product').css( "border-top","none" ).removeClass('toggled');
      });
    }else{
      $('.info').slideToggle('slow', function() {
        $('.product').css( "border-top","1px solid #000" ).addClass('toggled');
      });
    }
});​

http://jsfiddle.net/kaunt/

于 2012-05-09T07:40:24.187 に答える