Question

我遇到一个问题，当我点击手风琴的特定部分时，我正试图完成身体背景颜色的变化。

如下：我在一支手风琴中有三个部分。当我点击＃1部分时，我想要改变身体背景颜色。当我点击＃2部分时，我希望身体背景颜色切换回原始背景颜色，然后更改为与第2部分相关的新部分，同样在部分＃3上进行，依此类推。

我在不同部分之间点击时用toggleClass完成了这个，并且它可以正常工作。但是，当我连续两次点击同一部分时问题就出现了。背景颜色切换回原始的背景颜色，然后它返回到if语句并再次激活toggleClass，因此背景切换到第1节背景。

我希望它的工作方式就像点击相同的部分两次原始的背景颜色应保持活动状态。

这有什么简单的解决方案吗？（我想这是......）

$(document).ready(function() {
    
	$('.accordion').on('click', function() {
		$('body').removeClass('webbutveckling-1-body-background webbutveckling-2-body-background granssnittsdesign-body-background', 1000);
		if($(this).is('.accordion-section-webbutveckling-1')){
			$('body').toggleClass('webbutveckling-1-body-background', 1000);
			
		} else if($(this).is('.accordion-section-webbutveckling-2')){
			$('body').toggleClass('webbutveckling-2-body-background', 1000);
			
		} else if($(this).is('.accordion-section-granssnittsdesign')){
			$('body').toggleClass('granssnittsdesign-body-background', 1000);
		}
	});
  
});

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>

Answer 1

你的意思是这样吗？

$(document).ready(function() {

$('.accordion').on('click', function() {
    if($(this).is('.accordion-section-webbutveckling-1')){
        $('body').removeClass('webbutveckling-2-body-background granssnittsdesign-body-background', 1000);
        if(!$('body').hasClass('webbutveckling-1-body-background'))
            $('body').addClass('webbutveckling-1-body-background', 1000);

    } else if($(this).is('.accordion-section-webbutveckling-2')){
        $('body').removeClass('webbutveckling-1-body-background granssnittsdesign-body-background', 1000);
        if(!$('body').hasClass('webbutveckling-2-body-background'))
            $('body').addClass('webbutveckling-2-body-background', 1000);

    } else if($(this).is('.accordion-section-granssnittsdesign')){
        $('body').removeClass('webbutveckling-1-body-background webbutveckling-2-body-background', 1000);
        if(!$('body').hasClass('granssnittsdesign-body-background'))
            $('body').addClass('granssnittsdesign-body-background', 1000);
    }
});

});

问题是，您必须避免在单击两次后再次删除和添加该部分的类，否则您将淡出并进入。
希望有所帮助：）

jQuery toggleClass，包含手风琴中的多个部分

1 个答案: