Toggle addClass 删除跨度

Question

我正在尝试构建一个网站，但是当我将 addClass 和 removeClass 与切换结合使用时，我的跨度在第一次单击时被删除。因此我无法再次点击我的跨度。

这是我的 HTML、脚本和 CSS：

HTML

<div id="footersi">
    <span class="footspans">First span</span>
    <span class="footspans">Second span</span>
    <span class="footspans">Third span</span>
    <span class="footspans">Fourth span</span>
    <span class="footspans">Fifth span</span>
    </div>    
    <div id="footerci">
    <span class="footspans" id="contactinf">Contactinfo</span>
        <ul class="index">
            <li><b>Li1</b></li>    
        </ul>
    </div>

脚本 (jQuery)

$(document).ready(function(){
    $(".index").hide();

    $("#contactinf").click(function(){
        $(this).toggle(
            function(){
                $(this).addClass('active');
            },
            function(){
                $(this).removeClass('active');
            }
        );
        $(".index").slideToggle();
        $("html, body").animate({ scrollTop: 1000 }, 600);
    });
});

CSS

.footspans {
    cursor:pointer;
    color:#9D9D9D;
    transition:color 0.2s ease 0s;
    -webkit-transition:color 0.2s ease 0s;
    font-size:1.1em;
    text-decoration:none;
    font-weight:bold;
    margin-right:20px;
}

.footspans:hover {
    color:black;
}

#footersi {
    float:left;
    width:740px;
}

#footerci {
    float:right;
    width:240px;
}

#contactinf {
    float:right;
    margin-right:5px;
}

.index {
    float:left;
}

.active {
    float:left;
    color:black;
}

Answer 1

toggle() 正在切换元素的可见性，因此在第一次单击时它将隐藏元素，您将无法再次单击它。我相信你真正要找的是toggleClass()

$("#contactinf").click(function() {
    $(this).toggleClass("active");
});