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

是它on this jsfiddle。