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;
    });
});

Live Snippet：

＆＃13;

$(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;
    });
});

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

Answer 2

你需要做这样的事情：

$(function () {
    /* Expand/Collapse Features */
    $('.feature-title').click(function (e) {
        e.preventDefault(); // use proper jquery syntax instead of retuning false at the end.
        var title = $(this); // cache $(this) for betterr performance as you are using it more than once
        title.find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        title.find("a.notActive").toggleClass("active"); /* Changes title colour */
        title.next('div').slideToggle(); /* Expand/Collapse */

        title.parent().siblings().children().next().slideUp('slow', function () {
            var newTitle = $(this).parent();
            newTitle.find("i.fa-plus").removeClass("fa-minus"); /* only remove the class from the title closing */
            newTitle.find("a.notActive").removeClass("active"); /* only change the colour of the title closing */

        }); /* Closes open feauture */
    });
});

Example

Answer 3

快速（又脏）的解决方案是查找所有a.notActive个元素并从中删除active类：

$(function() {
            /* Expand/Collapse Features */
            $('.feature-title').click(function () {
            $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */


            $('a.notActive').removeClass('active'); // This is what you need


            $(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;
            });  
});

这是a working example。

Answer 4

$(function() {
        /* Expand/Collapse Features */
        $('.feature-title').click(function () {
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        $(".active").addClass("notActive").removeClass("active")    
        $(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;
        });

}）;

在div的slideUp（）事件上切换一个类

4 个答案: