11.23日第二题：图书分类答案

jQuery的应用

body{

font-size:14px;

}

div#book{

border:1px solid #666;

width:301px;

overflow:hidden

}

div#book div#head{

background-color:#eee;

padding:8px;

height:18px;

cursor:hand;

}

div#head h3{

padding:0px;

margin:0px;

float:left;

}

div#head span{

float:right;

margin-top:3px;

}

div#content{

padding:8px;

}

div#content ul{

list-style:none;

margin:0px;

padding:0px;

}

div#content ul li{

float:left;

width:95px;

height:23px;

line-height:23px;

}

div#foot{

float:right;

padding-top:5px;

padding-bottom:5px;

}

$(function(){ //页面加载事件

$("div#head").click(function(){ //绑定标题版块的单击事件的处理方法

var flag=$("div#content").is(":visible"); //获取内容版块是否可见

if(flag==true){

//如果内容可见就隐藏且更换图片

$("div#content,div#foot").css("display","none");

$("div#head img").attr("src","images/jt1.jpg"); //获取div#head的img子元素

}else{

//如果内容不可见就显示且更换图片

$("div#content,div#foot").css("display","block");

$("div#head img").attr("src","images/jt2.jpg"); //获取div#head的img子元素

}

});

$("div#foot>a").click(function(){//绑定a标签单击事件的处理方法

var info=$("div#foot>a").text();//获取div#foot的子元素的文本内容

if(info=="简化"){

$("div#content li:gt(5)").css("display", "none"); //索引是6的li项隐藏

//a标签的文本内容设置为"更多"

$("div#foot>a").text("更多");

}else{

$("div#content li:gt(5)").css("display", "block"); //索引是6的li项显示

//a标签的文本内容设置为"简化"

$("div#foot>a").text("简化");

}

});

});

图书分类

小说

文艺

青春

少儿

生活

社科

管理

计算机

教育

工具书

工具书

其他类

简化

作者简介：长按此图识别我，80后计算机专业人士。时常觉得自己情商被人抢了，喜欢写温暖治愈系文字，热爱生活，喜欢一切温暖文艺的事物。