現(xiàn)有的情況是網(wǎng)站主頁(yè)有一個(gè)顯示時(shí)事新聞的list,通常情況下只顯示五條最新消息,消息下方有一個(gè)【more】按鈕,點(diǎn)擊查看更多,當(dāng)全部信息展開(kāi)后,此時(shí)按鈕仍然顯示為【more】有些奇怪,想把它改成【close】,點(diǎn)擊進(jìn)行關(guān)閉。
方法很多種,一個(gè)是更改按鈕顯示內(nèi)容
當(dāng)然也可以重新追加一個(gè)【close】按鈕,我選擇的是第二種,
在js中添加如下代碼:
$(document).ready(function)(){?
????A.b(); //用于隱藏【close】按鈕
????A.c(); //【more】點(diǎn)擊事件
????A.d(); //【close】點(diǎn)擊事件
});
????A = {
????????b:function() {
????????????$(‘.close’).hide();//首先隱藏【close】按鈕
????????},
????????c:function() {
????????????$(document).on(‘click’,‘.more’,function() {
????????????$(‘.close’).fadeIn(); //顯示【close】按鈕
????????????$(‘.more’).hide(); //隱藏【more】按鈕
????????});
????},
????????d:function() {
????????????$(document).on(‘click’,’.close’,function() {? ? ?
????????????????XXX.slideToggle(‘slow’,function(){ //為了讓按鈕轉(zhuǎn)換不突兀,在列表隱藏動(dòng)作結(jié)束之后在加載后續(xù)動(dòng)作
????????????????$(‘.close’).hide();//隱藏關(guān)閉按鈕
????????????????$(‘.more’).fadeIn();//顯示更多按鈕
????????????????});
????????????});
????????}
};