如何删除折叠面板

时间:2017-03-07 10:11:21

标签: javascript jquery html css twitter-bootstrap

我创造了一个可折叠的手风琴面板。当我折叠打开/关闭面板时,背景颜色会被拖动到面板的右侧。 有没有办法删除??? 这是链接http://www.bootply.com/BEDsHmX6SV CSS

.panel-default{
  border-color: transparent;
}

.panel-default>.panel-heading,
.panel{
  background-color: #0f548c; 
  border:0 none;
  box-shadow:none;
  color: #fff;
}

.panel-default>.panel-heading+.panel-collapse .panel-body{
  background: #fff;
  color: #000;
}

.panel-body{
  padding: 20px 20px 10px;
}

.panel-group .panel+.panel{
  margin-top: 20px;
  border-top: 1px solid #fff;
}

.panel-group .panel{
  border-radius: 0;
}

.panel-heading{
    border-radius: 0;
}

.panel-title>a{
  color: #fff;
}

.accordion-inner img{
  border-radius: 4px;
}


a.accordion-toggle  i{
  width: 40px;
  line-height: 38px;
  font-size: 20px;
  margin-top: -10px;
  text-align: center;
  margin-right: -15px;
  background: #82c226;
  color:#fff;
}

HTML

<div class="col-sm-6 wow fadeInDown">
                    <div class="accordion">
                        <div class="panel-group" id="accordion1">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">
                                            Our Mission
                                            <i class="fa fa-angle-right pull-right"></i>
                                        </a>
                                    </h3>
                                </div>

                                <div id="collapseOne1" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="media accordion-inner">
                                            <div class="media-body">
                                                <h4>Our Mission</h4>
                                                <p>To create value for our clients, for society and for ourselves through innovative IT enabled solutions</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">
                                            Our Working Principle
                                            <i class="fa fa-angle-right pull-right"></i>
                                        </a>
                                    </h3>
                                </div>
                                <div id="collapseTwo1" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><i class="fa fa-check-square-o"></i> Simple solutions that work efficiently
                                            <br><i class="fa fa-check-square-o"></i> Speed of Execution
                                            <br><i class="fa fa-check-square-o"></i> Uncompromising Quality
                                            <br><i class="fa fa-check-square-o"></i> Rapid Technology Adoption
                                            <br><i class="fa fa-check-square-o"></i> Clients are our Partners
                                            <br><i class="fa fa-check-square-o"></i> We thrive on communication
                                            <br><i class="fa fa-check-square-o"></i> We value a learning culture, We value curiosity
                                            <br><i class="fa fa-check-square-o"></i> We welcome other points of view
                                            <br><i class="fa fa-check-square-o"></i> We have a wealth of inspiration to draw from as we continue to innovate</p>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">
                                            Our Technical Skills
                                            <i class="fa fa-angle-right pull-right"></i>
                                        </a>
                                    </h3>
                                </div>
                                <div id="collapseThree1" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><font style="font-weight: bold;">Enterprise Applications:</font>
                                            Our web innovation team has deep expertise in developing 
                                            custom enterprise web applications to our clients specifications. 
                                            We work with Java/ J2EE, PHP, MICROSOFT Technologies, Web Services and Databases.
                                            The team also has very good knowledge on a number of industry standard frameworks.   
                                            <br><br>
                                            <font style="font-weight: bold;">
                                            Mobility:</font>
                                            The Mobility team helps clients build innovative applications on 
                                            Android and iOS. We believe in building native applications. We do however have PhoneGap and AngularJS expertise also.
                                            <br><br>
                                            <font style="font-weight: bold;">
                                            Business Support:</font>
                                            Our business support team comprises of individuals with rich experience 
                                            who are capable of supporting clients in pre-sales work, requirements analysis and consultancy for any phase of the software development life cycle.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1">
                                            Why Partner With Us?
                                            <i class="fa fa-angle-right pull-right"></i>
                                        </a>
                                    </h3>
                                </div>
                                <div id="collapseFour1" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p><i class="fa fa-arrows-alt"></i> Core team members with over 20 years of experience
                                            <br><i class="fa fa-arrows-alt"></i> Our speed of execution without compromising quality
                                            <br><i class="fa fa-arrows-alt"></i> Our hands-on ability to help you conceptualize and deliver products
                                            <br> <i class="fa fa-arrows-alt"></i> Our network of highly skilled technical professionals
                                            <br><i class="fa fa-arrows-alt"></i>  Our ability to build innovative solutions
                                            <br><i class="fa fa-arrows-alt"></i> Our commitment to provide you with quality products, support and services
                                            <br>... All these bundled with our cost advantage...</p>
                                    </div>
                                </div>
                            </div>
                        </div><!--/#accordion1-->
                    </div>
                </div>

1 个答案:

答案 0 :(得分:1)

您需要修改面板标题和面板标题的css,如下所示

从面板标题中删除背景颜色和填充

.panel-default>.panel-heading, .panel {
    /* background-color: #0f548c; */
    border: 0 none;
    box-shadow: none;
    color: #fff;
    padding: 0;

}

为面板标题添加填充和背景颜色

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    background: #0f548c;
    padding: 10px;
}