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

<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 に答える
0

クリック関数内で、追加してみてください

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

.slide-tab-upスタイルがスタイルをオーバーライドする限り.slide-tab-down、これは機能するはずです。

e.preventDefault()別のメモとして、関数の先頭にも配置することをお勧めします。

于 2013-02-07T22:14:51.270 に答える