0

在此站点csr.steelcase.com的主页上，当您单击“阅读更多”和滑块框上的向下箭头时，当它向下滑动并且类型更改为“关闭”时，我正试图使其到达我试图使向下箭头变成向上箭头。

控制网站这一部分的代码在 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;}
4

2 回答 2

0

在您的点击功能中，尝试添加

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

只要您的.slide-tab-up样式覆盖您的.slide-tab-down样式，这应该可以工作。

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

于 2013-02-07T22:14:51.270 回答
0

我建议将另一个泛型类添加到<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-tab-down/slide-tab-up 类：

$('.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-07T22:21:29.730 回答