jQuery实现简单点击隐藏和点击显示列表的功能
2018-07-17 本文已影响0人
zhangzeshan
实现功能为:列表内容较长 隐藏部分内容 点击按钮显示隐藏内容 再次点击隐藏内容
jQ代码如下:
$(function(){
var $cate = $("ul li:gt(5):not(':last')") ;//获取大于第五行的内容不包括最后一行为对象
$cate.hide();//将对象隐藏
var $more = $("div.showmore>a");//获取显示全部内容的按钮
$more.click(function(){
if($cate.is(":hidden")){//当内容为隐藏的时候
$cate.show();//将对象显示
$(".showmore a span").text("显示精简内容");//判断为隐藏的时候 显示全部 按钮文字变为显示成精简内容
}else{
$cate.hide();//将对象隐藏
$(".showmore a span").text("显示全部内容");//判断为显示的时候 隐藏部分 按钮文字变成显示全部内容
}
return false;//禁止超链接跳转
})
})
HTML代码:
