0
アコーディオンの特定のセクションをクリックすると、私はボディの背景色を変更しようとしています。jQuery toggleClassでアコーディオン内の複数のセクションがある
次のようになります。 私は1つのアコーディオン内に3つのセクションがあります。 セクション＃1をクリックすると、ボディの背景色を変更します。 セクション＃2をクリックすると、元の背景色に戻って、セクション＃2に関連付けられた新しいものに変更し、セクション＃3などにも同じように変更します。
私はdiffセクションの間をクリックすると、これをtoggleClassで実行しましたが、すべてうまく動作します。しかし、同じセクションを2回連続してクリックすると問題が発生します。背景色は元のbodyの背景色に戻りますが、if文に戻って再びtoggleClassをアクティブにするので、バックグラウンドはセクション＃1の背景に切り替わります。
同じセクションを2回クリックすると、元のボディーの背景色をクリックしたときと同じように動作します。
これには簡単な解決法はありますか？あなたはこのような何かを意味するか
$(document).ready(function() {
\t $('.accordion').on('click', function() {
\t \t $('body').removeClass('webbutveckling-1-body-background webbutveckling-2-body-background granssnittsdesign-body-background', 1000);
\t \t if($(this).is('.accordion-section-webbutveckling-1')){
\t \t \t $('body').toggleClass('webbutveckling-1-body-background', 1000);
\t \t \t
\t \t } else if($(this).is('.accordion-section-webbutveckling-2')){
\t \t \t $('body').toggleClass('webbutveckling-2-body-background', 1000);
\t \t \t
\t \t } else if($(this).is('.accordion-section-granssnittsdesign')){
\t \t \t $('body').toggleClass('granssnittsdesign-body-background', 1000);
\t \t }
\t });
});body {
background-color: #e68246;
}
/*----- Accordion -----*/
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}
/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#666;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
text-decoration:none;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
/* Type */
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
/*----- Accordion heading -----*/
.accordion-section-content-heading {
border-bottom: 4px solid #cdcdcd;
}
/*----- Accordion ul-tasks -----*/
.accordion-ul-tasks {
padding: 0;
margin: 0;
list-style: none;
}
.accordion-ul-tasks li {
margin-bottom: 10px;
border: 1px solid black;
}
.accordion-ul-tasks a {
display: block;
color: #787;
text-decoration: none;
padding: 5px 10px;
transition: margin-left .4s;
}
.accordion-ul-tasks a:hover {
margin-left: 10px;
}
.accordion-ul-tasks a:before {
content: "> ";
}
.accordion-ul-tasks li:hover {
font-weight: bold;
}
/*----- Accordion Toggle Classes for body background -----*/
.webbutveckling-1-body-background {
background-color: #46aae6;
}
.webbutveckling-2-body-background {
background-color: red;
}
.granssnittsdesign-body-background {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<body>
<div class="wrapper">
<main class="main-content">
<section class="accordion accordion-section-webbutveckling-1">
<section class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Webbutveckling 1</a>
<section id="accordion-1" class="accordion-section-content">
<h2 class="accordion-section-content-heading">Introduktion</h2>
<ul class="accordion-ul-tasks">
<li><a href="#" target="_blank">Länk till skolverket - Webbteknik</a></li>
<li><a href="#" target="_blank">Google Drive - Skapa ett konto</a></li>
<li><a href="#" target="_blank">Loggbok: Elevmall</a></li>
</ul>
</section> <!--end .accordion-section-content-->
</section> <!--end .accordion-section-->
</section> <!--end .accordion-->
<section class="accordion accordion-section-webbutveckling-2">
<section class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Webbutveckling 2</a>
<section id="accordion-2" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</section> <!--end .accordion-section-content-->
</section> <!--end .accordion-section-->
</section> <!--end .accordion-->
<section class="accordion accordion-section-granssnittsdesign">
<section class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Gränssnittsdesign</a>
<section id="accordion-3" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</section> <!--end .accordion-section-content-->
</section> <!--end .accordion-section-->
</section> <!--end .accordion-->
</main>
</div>
作業中のスニペットを入力してください。 – Ionut
もちろん。そのために残念。 –