Question

在此网站的主页上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();
  });

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

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

Answer 1

在点击功能中，尝试添加

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

只要您的.slide-tab-up个样式覆盖了.slide-tab-down个样式，这就行了。

另一方面，我建议将e.preventDefault()放在该功能的顶部。

Answer 2

我建议将另一个通用类添加到包含该图像的<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 | |');
        }
});

滑块打开时交换图像

2 个答案: