我创建了一个可折叠的 Accordion 面板。当我折叠打开/关闭面板时，背景颜色会被拖到面板的右侧。 有什么办法可以去掉吗？？？ 这是链接 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>
最佳答案
您需要修改panel-heading和panel-title的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;
}
关于javascript - 如何删除折叠面板时出现的蓝色拖线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42645416/