:target方法(点击效果)

该方法主要是通过页面锚点来实现的,所以如果页面的高度超过了一屏,那么显示效果就不是很好,因为它会直接跳到锚点的地方,所以那个时候也许连标题都看不到。然后使用css3的:target选择器,选中跳到的锚点,再给其显示高度就可以了。

青,取之于蓝,而青于蓝

学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

冰,水为之,而寒于水

积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

君子博学而日参省乎己

学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

君子学不可以已

积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

css code

#accordion1{
	width:600px;
	margin:0 auto 9px;
}
#accordion1 .accordion-title:before{
	content:"\25ba";
	color:#ccc;
	margin-right:5px;
}
#accordion1 .accordion-content{
	height:0;
	overflow:hidden;
	padding-left:20px;
	-webkit-transition:height 1s ease;
	-moz-transition:height 1s ease;
	-ms-transition:height 1s ease;
	-o-transition:height 1s ease;
	transition:height 1s ease;
}
#accordion1 :target .accordion-title:before{
	content:"\25bc";
	color:#f00;
}
#accordion1 :target .accordion-content{
	height:auto;
}

注:因为我们这个页面超过了一屏的高度,点击之后会直接跳到锚点地方,所以在这里把accordion的titile和content用一个div包起来,然后设置这个div的id为标题的锚点链接,那样跳动的时候还是有标题的;其实这里的动画效果并没有出来,那是因为我们设置了height为auto,如果把height设置为一个具体的值,动画效果就会出来,但是这会产生一个bug(如果你的页面能在一屏显示,或者在最后一屏显示,这个bug都不会出现的),所以这里就没有用这个动画效果,如果对这比较感兴趣可以自己动手试试

:hover方法(滑过效果)

其实这个方法css2就可以支持了(ie6除外),只是如果加上css3的动画效果会更好点。这种折叠其实可以有两种形式,第一种和前面的例子一样,一开始所有的折叠内容都是看不见的,然后通过对其父元素的hover状态,改变accordion-content的显示。还有一种是一开始平分所有的高度,然后透过滑过显示一个全部的,其余的只剩标题。我们这里主要介绍第二种,对于第一种这里只贴出css代码

css code

#accordion2 .accordion-content{
	height:0;
	overflow:hidden;
	-webkit-transition:height 1s ease;
	-moz-transition:height 1s ease;
	-ms-transition:height 1s ease;
	-o-transition:height 1s ease;
	transition:height 1s ease;
}
#accordion2 li:hover .accordion-content{
	height:auto;
}
  • 青,取之于蓝,而青于蓝

    学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

  • 冰,水为之,而寒于水

    积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

  • 君子博学而日参省乎己

    学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

  • 君子学不可以已

    积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

css code

#accordion2{
	height:260px;
}
#accordion2 li{
	height:25%;
	overflow:hidden;
	-webkit-transition:height 0.3s ease;
	-moz-transition:height 0.3s ease;
	-ms-transition:height 0.3s ease;
	-o-transition:height 0.3s ease;
	transition:height 0.3s ease;
}
#accordion2:hover li{
	height:17%;
}
#accordion2 li:hover{
	height:49%;
}

注:这个:hover的效果可以变成水平的,那样变化的就是width而不是height了,感兴趣的话可以自己亲手试试

radion/checkbox点击效果

这个实现方式比上面两个应该是更加优良的,也是很巧的。这个的点击效果主要是通过对input的checked状态进行判断,然后使用css3高级选择器来选中其同辈元素,以实现这个元素的显示与隐藏,当然如果是单选的radio那么只能有一个是显示的,而如果是多选的checkbox那么就可以实现所有的都是展开状态

  • 学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

  • 积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

  • 学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

  • 积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

css code

#accordion3 input[type='radio']{
	display:none;
}
#accordion3{
	border:1px solid #D2D2D2;
	border-top:none;
	width:600px;
	margin:0 auto;
}
#accordion3 label{
	display:block;
	font-size:16px;
	background-color:#F4F4F4;
	border-top:1px solid #D2D2D2;
	line-height:36px;
	font-weight:bold;
}
#accordion3 label:before{
	content:"\2610";
	background-color:#fff;
	width:19px;
	height:19px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	text-align:center;
	margin:0 5px;
	box-shadow:0 0 1px rgba(0,0,0,0.5);
	display:inline-block;*display:inline;*zoom:1;
	line-height:19px;
	vertical-align:middle;
}
#accordion3 .accordion-content{
	height:0;
	overflow:hidden;
	-webkit-transition:height 0.3s ease;
	-moz-transition:height 0.3s ease;
	-ms-transition:height 0.3s ease;
	-o-transition:height 0.3s ease;
	transition:height 0.3s ease;
}
#accordion3 .accordion-content p{
	margin:10px;
}
#accordion3 input:checked + label:before{
	content:"\2611";
	color:#f00;
	box-shadow:0 0 2 px rgba(255,0,0,0.5);
}
#accordion3 input:checked ~ .accordion-content{
	height:100px;
}

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持