现有的情况是网站主页有一个显示时事新闻的list,通常情况下只显示五条最新消息,消息下方有一个【more】按钮,点击查看更多,当全部信息展开后,此时按钮仍然显示为【more】有些奇怪,想把它改成【close】,点击进行关闭。
方法很多种,一个是更改按钮显示内容
当然也可以重新追加一个【close】按钮,我选择的是第二种,
在js中添加如下代码:
$(document).ready(function)(){
A.b(); //用于隐藏【close】按钮
A.c(); //【more】点击事件
A.d(); //【close】点击事件
});
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(){ //为了让按钮转换不突兀,在列表隐藏动作结束之后在加载后续动作
$(‘.close’).hide();//隐藏关闭按钮
$(‘.more’).fadeIn();//显示更多按钮
});
});
}
};