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

Question

我有一個運行良好的jQuery切換功能：如果單擊dt標簽，則dd部分會向上或向下滑動。 就像它應該那樣。 但是現在我想擴展切換功能：dt標簽中span元素的背景圖像應該在您每次單擊dt標簽時都改變位置（向上或向下顯示箭頭）。 我試圖通過以下代碼來實現這一點，但是我無法使其正常工作

         <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）給您的跨度一個公共類而不是一個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 { ... }

具有三個“ dt”的演示 。