一款网格布局的分类扩展卡片,点击每个分类的图标可展开具体的扩展内容,扩展内容可以点击叉号关闭,可以自由更换为图片、多文本段落等等,喜欢的童鞋请收下吧。
页面的head部分,需远程调用font-awesome图标字体库,并引入本地CSS样式文件,代码如下:
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,div容器里分别放入i标签和span标签,多个分类只需要复制粘帖改内容即可,代码如下:
<div class="wrapper">
<div class="header">
<h1 class="header__title">网格布局的分类扩展卡片</h1>
<h2 class="header__subtitle">简单易用</h2>
</div>
<div class="cards">
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>科技</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>新闻</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>娱乐</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>电影</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>音乐</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>金融</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>网络</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>营销</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>探索</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i>
具体内容
</div>
</div>
</div>
</div>
页面的底部,需远程调用jQuery库,并引入一个本地JS文件,代码如下:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791