文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >手风琴内多个部分的jQuery toggleClass

问手风琴内多个部分的jQuery toggleClass
EN

Stack Overflow用户
提问于 2017-03-03 09:04:40
回答 1查看 89关注 0票数 0

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

它的大意是:我在一个手风琴里有三个部分。当我点击#1节时，我希望身体的背景色发生变化。当我点击第2节时，我希望车身背景色切换回原来的背景色，然后切换到与第2节相关联的新背景色，第3节也是如此，等等。

当我在不同的部分之间点击时，我已经用toggleClass完成了这一点，而且它工作得很好。但是，当我连续两次单击同一部分时，问题就出现了。背景颜色切换回原来的主体背景颜色，但它返回到if-语句并再次激活toggleClass，因此背景切换到第1节背景。

我希望它的工作方式，当点击相同的部分，两倍的原始身体背景颜色应该保持为活动。

有什么简单的解决办法吗？(我想是.)

​

代码语言：javascript
复制
$(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);
		}
	});
  
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

jquery
accordion
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-03 11:27:31

你是说像这样的事吗？

代码语言：javascript
复制
$(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);
    }
});

});

问题是，您必须避免在单击该节两次之后再次删除和添加该节的类，否则将出现淡出和进入。

希望有帮助:)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42574626

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档