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

Question

当我需要它向下和向上滑动时，这非常有用，但是由于我的 CSS，当它向上滑动时有一个双边框。所以我尝试在主css中取出顶部边框并在幻灯片后添加它，但如果有人再次切换它仍然存在。我将如何做到这一点，以便在第一个位置（当它向上时）没有边框顶部，而当它在第二个位置（当它向下时）有一个边框顶部。这是我的代码

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

Answer 1

演示 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');
  });
});​

您可以查看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" );
  });
});

演示