在滑塊打開時交換圖像

在本網站的主頁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

在滑塊打開時交換圖像

回答

相關問題