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切换 - 更改图像的背景位置

回答

相关问题