0
아코디언의 특정 섹션을 클릭 할 때 본문 배경색을 변경하려고 할 때 문제가 있습니다.jQuery 아코디언 안에 여러 섹션이있는 토글 클래스
다음과 같습니다 : 하나의 아코디언 안에 세 개의 섹션이 있습니다. 섹션 # 1을 클릭하면 본문 배경색을 변경하고 싶습니다. 섹션 # 2를 클릭하면 본문 배경색을 원래 배경색으로 전환 한 다음 섹션 # 2에 연결된 새 것으로 변경하고 섹션 # 3 등으로 이동합니다.
나는 다른 섹션들 사이를 클릭 할 때 toggleClass를 사용하여이 작업을 수행했다. 그러나 동일한 섹션을 두 번 연속 클릭하면 문제가 발생합니다. background-color는 원래의 body background-color로 다시 전환하지만 다시 if 문으로 돌아가서 toggleClass를 다시 활성화하므로 배경이 # 1 배경으로 전환됩니다.
동일한 섹션을 두 번 클릭하면 원래 몸의 배경색처럼 작동하도록하고 싶습니다. 배경색은 활성 상태로 유지되어야합니다.
간단한 해결책이 있습니까?
$(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
물론. 그 죄송합니다. –