jQuery 토글 - 이미지의 배경 위치 변경

잘 작동하는 jQuery 토글 기능이 있습니다. dt 태그를 클릭하면 dd 섹션이 위아래로 슬라이드합니다. 그냥 그랬던 것처럼. 하지만 이제 토글 기능을 확장하고 싶습니다. dt 태그를 클릭 할 때마다 위치를 변경해야하는 dt 태그 내의 span 요소 배경 이미지 (위 또는 아래 화살표 표시). 다음 코드를 사용하여이를 수행하려고 시도했지만 작동하지 못했습니다.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

"나는 작동시키지 못합니다"라는 의미를 설명하십시오. 화면에서 어떤 현상이 발생하고 있습니까? 배경이 전혀 나타나지 않습니까? 클릭하면 배경이 바뀌지 않습니까? 콘솔에 오류 메시지가 있습니까? – Larz

이 문제를 조사해 주셔서 감사합니다. 이제 문제가 보입니다 : 문제는이 페이지에 여러 dt 및 dd 요소가있어 스팬 id (#cpl)가 더 이상 고유하지 않다는 것입니다. 그게 왜 나를 위해 일하지 않습니다. find ('span') 또는 toggle.children ('span')을 사용하여이 문제를 해결하려고했지만 나에게 적합하지 않습니다. # id를 사용하지 않고 dt 요소의 범위를 어떻게 처리 할 수 있습니까? 고맙습니다! – Phil

세 단계 : 1) 스팬에게 대신 ID의 공통 클래스 보내기

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

3) 변경 :

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

2)에 클릭 함수 내에서 마지막 줄을 변경 귀하의 CSS는 'cpl'클래스를 주소 :

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

DEMO with three 'dt'.

출처

2014-11-14 19:11:01

jQuery 토글 - 이미지의 배경 위치 변경

답변

관련 문제