jQuery切換 - 更改圖像的背景位置

我有一個jQuery切換功能，它工作正常：如果我點擊dt標籤，dd部分向上或向下滑動。就像它應該的。但是現在我想擴展切換功能：dt-tag內的一個span元素的背景圖像應該在您每次點擊dt-tag（顯示箭頭向上或向下）時改變位置。我試圖做到與下面的代碼，但我不能讓它工作jQuery切換 - 更改圖像的背景位置

  <dt><?php echo $this->__($_filter->getName()) ?><span id="cpl"></span></dt> 
     <dd><?php echo $_filter->getHtml() ?></dd> 


     jQuery('dd').hide(); 
     jQuery('dt').click(function() { 
      var toggle = jQuery(this).nextUntil('dt'); 
      toggle.slideToggle(); 
      jQuery('dd').not(toggle).slideUp(); 
      jQuery('#cpl').toggleClass('clicked'); 
     }); 

     #cpl { 
     width: 90px; 
     height: 11px; 
     display: inline-block; 
     margin: 0 0 0 10px; 
     background:transparent url('../images/arrow.gif') no-repeat; 
     background-position: 0 0; 
     } 

     #cpl.clicked { 
     background-position: 0 -15px; 
     }

任何幫助深表感謝。謝謝。

來源

2014-11-14 Phil

您的代碼按預期工作：http://jsfiddle.net/8xqsx44b/ – George 2014-11-14 18:07:22

請描述「我無法讓它工作」的含義。屏幕上發生了什麼？背景沒有出現？點擊後背景不會改變位置嗎？控制檯中是否有錯誤消息？ – Larz 2014-11-14 18:26:12

感謝您關注此事。我現在看到了這個問題：問題是我在這個頁面上有多個dt和dd元素，所以span id（#cpl）不再是唯一的。這就是爲什麼它不適合我。我試圖通過使用find（'span'）或toggle.children（'span'）來解決這個問題，但它不適用於我。任何想法如何在不使用#id的情況下解決dt元素的跨度問題？謝謝！ – Phil 2014-11-14 18:31:40

三個步驟：1）給你跨越通用類，而不是ID：

<span class="cpl"></span>

2）你的點擊函數中的最後一行更改爲：

jQuery('dt').click(function() { 
    /* your code */ 
    // this selects only an element with class 'cpl' inside the clicked element 
    jQuery('.cpl', this).toggleClass('clicked'); 
});

3）改變你的CSS來解決類 'CPL'：

.cpl { ... } 
.cpl.clicked { ... }

DEMO with three 'dt'。

來源

2014-11-14 19:11:01

jQuery切換 - 更改圖像的背景位置

回答

相關問題