在滑块打开时交换图像

在本网站的主页csr.steelcase.com我试图让它到达当你点击“Read More”和滑动框上的向下箭头，当它滑下并且类型改变为“关闭”我试图让向下箭头变成向上箭头。在滑块打开时交换图像

控制该网站的这一部分是在footer.php的代码：

$('.slide-read-more,.slide-tab-down').click(function (e) { 
     mySlider.pause(); 
     $('.slide-content').slideToggle('slow', 'swing', function() { 
      if ($('.slide-content').is(":hidden")) { 
       $('.slide-read-more').text('| | Read More | |'); 
      } else { 
       $('.slide-read-more').text('| | Close | |'); 
      } 
     }); 
     e.preventDefault(); 
    });

我创建了一个新的向上箭头图像，并将其上传到图片文件夹，以及创建一个css规则为新的向上箭头，我只是不知道如何让图像换出。

.slide-tab-up {display:block; width:40px; height:43px; margin:0 0 0 358px; background:url(images/tab-upturn.png) no-repeat;}

来源

2013-02-07 user2048739

内，您的点击功能，尝试添加

$('.slide-tab-down').toggleClass('slide-tab-up');

只要你.slide-tab-up样式覆盖你的.slide-tab-down的风格，这应该工作。

另一方面，我建议把e.preventDefault()放在函数的顶部。

来源

2013-02-07 22:14:51 crowjonah

如果您切换幻灯片tab-down ...选择器将失败，这将无法正常工作。 – joeltine

我的编辑应该解决这个问题，但无论如何，除了使用选择器，类和ID的策略的一些改变之外，addClass，removeClass和/或toggleClass的一些组合是这里的工作。 – crowjonah

我会建议添加另一个通用类到<a>包含该图像。让我们称之为“slider-img”。因此，在您的标记如下：

<div class="slide-read-more-wrap" style="text-align:center;-webkit-backface-visibility: hidden;"> 
     <a title="Read More" class="slide-read-more">| | Read More | |</a> 
     <a href="#" title="" class="slide-tab-down slider-img"></a> 
</div>

然后在您的JS，在你的slideToggle功能，你需要的是这条线切换.slider-IMG的元素在幻灯片选项卡下/滑片补课：

$('.slide-content').slideToggle('slow','swing', function(){ 
     $('.slider-img').toggleClass('slide-tab-up').toggleClass('slide-tab-down'); 

     if ($('.slide-content').is(":hidden")) { 
       $('.slide-read-more').text('| | Read More | |'); 
     } else { 
       $('.slide-read-more').text('| | Close | |'); 
     } 
});

来源

2013-02-07 22:21:29 joeltine

在滑块打开时交换图像

回答

相关问题