mootools在按鈕上使用CSS效果切換div

Question

我有以下腳本來顯示/隱藏一些文本。 我想使切換按鈕成為單擊后會更改的圖像。 （例如，折疊時為“ +標題1”，展開時為“-標題1”）是否可以實現？

window.addEvent( 'domready', function(){
$$( '.moreInfoWrapper' ).each(function(item){
    var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
    thisSlider.hide();
    item.getElement( '.divToggle' ).addEvent( 'click', function(){ thisSlider.toggle(); } );
} );
} );

HTML：

<div class='moreInfoWrapper'>
    <div class='divToggle'>
        <h3>Title 1</h3>
    </div>
    <div class='moreInfo'>
        <h3>More Info About Item 1</h3>
        <p>Here is some content.</p>
        <p>More Content</p>
        <p>End of Content</p>
    </div>
</div>
<div class='moreInfoWrapper'>
    <div class='divToggle'>
        <h3>Title 2</h3>
    </div>
    <div class='moreInfo'>
        <h3>More Info About Item 2</h3>
        <p>Here is some content.</p>
        <p>More Content</p>
        <p>End of Content</p>
    </div>
</div>

Answer 1

文本上可能是如此（或可以更改CSS類）。 這是一個笨拙的解決方案，但它可以工作。 也許有人反應更好。

$$('.moreInfoWrapper .moreInfo').each(function(item){
    item.set('slide', { duration: 500 }).slide('hide');
});

$$('.moreInfoWrapper .divToggle').each(function(item){
  item.addEvent('click', function(e){
    var el = this.getFirst('h3');
    if (this.getNext('div').getDimensions().height == 0) {
      el.set('html', el.get('html').replace('+','-'));
    } else {
      el.set('html', el.get('html').replace('-','+'));
    }
    this.getNext('div').getFirst('.moreInfo').slide('toggle');
  });
});

在這個jsfiddle上輸入它。