18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

建站常用之折叠面板Collapse

2020-01-10 分享

jQuery调用版本:1.11.1

效果展示

企业建站

页面

<div class="accordion-box">
    <div class="list-accordion">
        <div class="list-item">
            <div class="list-item-title" data-index="0">
                <span class="title-text">我是标题一</span>
                <span class="title-icon  title-icon-active"><i class="glyphicon glyphicon-chevron-right"></i></span>
            </div>
            <div class="list-item-content">
                jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title" data-index="1">
                <span class="title-text">我是标题二</span>
                <span class="title-icon title-icon-active"><i class="iconfont icon-xiangxiajiantou"></i></span>
            </div>
            <div class="list-item-content">
                jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title" data-index="2">
                <span class="title-text">我是标题三</span>
                <span class="title-icon title-icon-active"><i class="iconfont icon-xiangxiajiantou"></i></span>
            </div>
            <div class="list-item-content">
               20077月,jQuery 1.1.3版发布,这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了PrototypeMootools以及Dojo等同类JavaScript库的水平。
            </div>
        </div>
        <div class="list-item">
            <div class="list-item-title" data-index="3">
                <span class="title-text">我是标题四</span>
                <span class="title-icon title-icon-active"><i class="iconfont icon-xiangxiajiantou"></i></span>
            </div>
            <div class="list-item-content">
                20085月,jQuery 1.2.6版发布,这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中,同时也修改了许多BUG,而且有不少的性能得到提高。
            </div>
        </div>
    </div>
</div>

样式

  .accordion-box {
	position:relative;
	padding:15px;
	background:#fff;
}
.accordion-box .list-item {
	position:relative;
	display:block;
	margin-bottom:-1px;
	background-color:#fff;
	border-top:1px solid #dedede;
	border-bottom:1px solid #dedede;
}
.accordion-box .list-item-title {
	padding:15px 0;
	position:relative;
}
.accordion-box .list-item-content {
	background-color:#fff;
	display:none;
	box-sizing:border-box;
	overflow:hidden;
}
.accordion-box .title-icon {
	position:absolute;
	top:15px;
	right:15px;
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	/* IE 9 */
      -moz-transform:rotate(0deg);
	/* Firefox */
      -webkit-transform:rotate(0deg);
	/* Safari  Chrome */
      -o-transform:rotate(0deg);
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.accordion-box .title-icon-active {
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	/* IE 9 */
      -moz-transform:rotate(90deg);
	/* Firefox */
      -webkit-transform:rotate(90deg);
	/* Safari  Chrome */
      -o-transform:rotate(90deg);
}


JS

$(function() {
    $(".list-accordion").on("click", ".list-item .list-item-title", function() {
        if ($(this).next(".list-item-content").is(':hidden')) {
            $(this).next(".list-item-content").slideDown();
        } else {
            $(this).next(".list-item-content").slideUp();
        }
    })
})
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图