Question

当我需要它向下滑动时，这很棒，但是由于我的css，它有一个双边框。所以我尝试取出主css中的顶部边框并在滑动后添加它但是如果有人再次切换它仍然存在。如何使它在第一个位置（当它向上）没有边框顶部时，当它在第二个位置（当它向下时）有一个边框顶部时。这是我的代码

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

Answer 1

Demo 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)清除了一些动画队列。

Answer 2

您可以通过创建具有相应边框的2个css类来使用jquery toggleClass。并在需要时切换它们

实施例

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

您可以查看live example on jsfiddle

Answer 3

哦，玩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/

Answer 4

$('.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" );
  });
});

<强> DEMO

滑动切换两种不同的CSS状态

4 个答案: