0
我遇到了一個問題，那就是當我點擊手風琴的一個特定部分時，我試圖完成對背景顏色的改變。jQuery toggleClass在手風琴中有多個部分
它如下： 我在一個手風琴內有三個部分。 當我點擊第1部分時，我想要更改主體背景顏色。 當我點擊第2部分時，我希望身體背景顏色切換回原始背景顏色，然後切換到綁定到第2部分的新的背景顏色，同樣在第3部分等等。
我已經完成這與toggleClass點擊不同部分之間時，它工作得很好。但是，當我連續兩次點擊同一部分時，問題就出現了。背景顏色會切換回原始的背景顏色，但會返回到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
當然。對不起。 –