javascript - 在 div 的 slideUp() 事件上切换类

Question

我编写了这个打开 div 的函数，当您单击其上方的标题时会显示其文本。打开一个 div 将关闭该部分中任何其他打开的 div。

我想要发生的是当 div 打开时，标题改变颜色，然后在它关闭时变回原来的颜色。这一点，我可以做到，但我似乎无法理解的是，如果我打开另一个 div，它会变回原样。

这是我的功能:

$(function() {
        /* Expand/Collapse Features */
        $('.feature-title').click(function () {
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        $(this).find("a.notActive").toggleClass("active"); /* Changes title colour */
        $(this).next('div').slideToggle(); /* Expand/Collapse */

        $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
        return false;
        });  
    });

无论如何我都不是 JS 专家，所以这对我来说是一个很好的学习曲线。

在这里查看 http://jsfiddle.net/pkL5p8uj/

非常感谢任何帮助。谢谢。

Answer 1

您可以在将 active 类添加到新标题之前删除它，例如:

$(function() {
    /* Expand/Collapse Features */
    $('.feature-title').click(function() {
        var targetTitle;                                                // <= NEW
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        targetTitle = $(this).find("a.notActive");                      // <= NEW
        $("a.notActive.active").not(targetTitle).removeClass("active"); // <= NEW
        targetTitle.toggleClass("active"); /* Changes title colour */   // <= CHANGED
        $(this).next('div').slideToggle(); /* Expand/Collapse */

        $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
        return false;
    });
});

现场片段:

$(function() {
    /* Expand/Collapse Features */
    $('.feature-title').click(function() {
        var targetTitle;
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        targetTitle = $(this).find("a.notActive");
        $("a.notActive.active").not(targetTitle).removeClass("active");
        targetTitle.toggleClass("active"); /* Changes title colour */
        $(this).next('div').slideToggle(); /* Expand/Collapse */

        $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
        return false;
    });
});

.feature-item { padding:20px 10px 20px 10px;border-bottom:1px solid #B3A89D; text-align:left; } 
.feature-list { margin-top:0px; }
.feature-plus { padding-right:30px; }
.feature-text { display:none;padding-top:10px;padding-left:44px; }
.feature-item a { color:#000000; text-decoration:none; cursor:pointer; } 
.notActive { color:#000000 !important; }
.active { color:#D80003 !important; }
.feature-title { cursor:pointer; }

<div class="col-lg-6 col-lg-offset-4">
                    	<div class="feature-list">
  							<div class="feature-item">
    							<div class="feature-title" href="#one"><a href="#one" data-target="one" class="notActive"><span class="feature-plus"><i class="fa fa-minus"></i></span> TRENDING POLITICIANS</a></div>
    							<div class="feature-text" id="item1">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#two" data-target="two" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TWITTER TRENDING PARTIES</a></div>
    							<div class="feature-text">The political parties of UK which are trending currently in Twitter are being shown.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#three" data-target="three" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TWITTER TRENDING TOPICS</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#four" data-target="four" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> FAVOURITES</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#five" data-target="five" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TWEETMAP</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
   			 					<div class="feature-title"><a href="#six" data-target="six" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> COMPARE</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#seven" data-target="seven" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TOPIC ASSOCIATION</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>                        
            		</div>
                </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>