javascript - jQuery 切换 - 更改图像的背景位置

Question

我有一个运行良好的 jQuery 切换功能:如果我单击 dt 标签，则 dd 部分会向上或向下滑动。就像它应该的那样。但现在我想扩展切换功能:每次单击 dt 标签(显示向上或向下箭头)时，dt 标签内的 span 元素的背景图像应该更改位置。我尝试使用以下代码来完成此任务，但无法让它工作

         <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;
       }

非常感谢任何帮助。谢谢。

Answer 1

三个步骤:1)为您的跨度提供一个公共(public)类而不是 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' .