0
私は分割された背景を持っている - トップは青、下は白です。私は、バックグラウンドでも動くパネルを展開したとき、私は、バックグラウンド内のブートストラップパネルを持っているのでスプリットバックグラウンド - パネルの展開に応じて移動を停止
//accordion - changes colour on open/close
var selectIds = $('#panel1,#panel2,#panel3');
$(function($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
$(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
});
$(".panel-heading").find("a[data-toggle=collapse]").on('click', function() {
if ($(this).hasClass('collapsed')) {
$(this).closest('.panel-group').find('.panel-default').removeClass('open');
$(this).closest('.panel-default').addClass('open');
} else {
$(this).closest('.panel-default').removeClass('open');
}
});
});.gradient {
background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: repeating-linear-gradient(#18A9E5, #18A9E5 49.9%, #fff 50.1%, #fff 100%);
}
.split {
width: 100%;
/*height:50px;*/
max-height: 25%;
padding: 2% 5% 5% 5%;
}
.solid-white {
background-color: #fff;
padding-top: 10px;
padding-right: 3px;
padding-left: 3px;
padding-bottom: 0!important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
h2 {
padding-left: 25px;
}
}
.page-section {
border-bottom: 1px solid #ddd;
overflow: hidden;
&.page-section-md {
padding-top: 20px;
padding-bottom: 20px;
}
}
.panel-body-help {
background-color: #616161;
color: white;
}
.panel-default.open {
background-color: #616161;
transition: all 0s;
}
.custom-panel {
.panel-default.open {
> .panel-heading {
color: #fff;
font-weight: bolder;
background: transparent;
}
}
}
.custom-panel {
.panel-default {
> .panel-heading {
background: #fff;
}
}
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
padding: 15px;
}<section class="page-section page-section-md split gradient">
<div class="row">
<div class="col-md-2">
<h4 class="heading-responsive text-white">
Welcome
</h4>
</div>
</div>
<div class="container wrap-md">
<br />
<br />
<div class="col-md-offset-2 col-md-8 solid-white-help">
<h2 class="heading-responsive thin">Welcome</h2>
<br />
<div class="panel-group custom-panel" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle collapsed text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1">
<i class="fa fa-plus text-primary"></i> Get started
</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a>
</h4>
</div>
<div id="panel5" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a>
</h4>
</div>
<div id="panel6" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a>
</h4>
</div>
<div id="panel7" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a>
</h4>
</div>
<div id="panel8" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
</div>
</div>
<br />
</div>
<br />
<br />
</section>：私は、分割された背景を取得するには、このスタイルを使用しています。 （青のように、私がパネルを開いていくにつれて低くなります）。 背景がどのようなサイズであっても、色を固定するにはどうしたらいいですか？
https://support.google.com/mail#topic=3394144 <これは、パネルが展開されたときに背景が動かないようにするための良い参考資料です。
これは本当に簡単な修正であり、私はちょうどそれを逃しています - あなたの助けに感謝！ TIA。
代わりに 'section'要素に直接グラデーションを追加する、新しい子要素を追加してみてくださいまたは擬似要素を使用し、設定した高さと絶対位置。こうすることで、 'section'要素にコンテンツを追加するにつれて、グラデーションを持つ要素が大きくなることはありません。 – sean
フルコードを入力できますか？ – TOM
私はブートストラップパネルを使用しています - 私は欠落していた.solid-whiteスタイルの上に含まれています。@ 012のTOM – becca