网格布局的分类扩展卡片【原创

来源:https://www.sucaihuo.com/js/2621.html 2017-08-02 23:37浏览(1483) 收藏

一款网格布局的分类扩展卡片,点击每个分类的图标可展开具体的扩展内容,扩展内容可以点击叉号关闭,可以自由更换为图片、多文本段落等等,喜欢的童鞋请收下吧。
网格布局的分类扩展卡片
分类:图片代码 > 网格 难易:初级
查看演示 下载资源 下载积分: 40 积分

页面的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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2621.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2