javascript - 如何在单击 var ID 时添加/删除子元素的类？

Question

我有一个 Accordion ，用于常见问题解答页面。单击特定问题时，部分箭头需要从右变为下。所有其他人都需要默认回到右侧。为了让它发挥作用，我缺少什么？

            <dd id="1" class="accordion-navigation">
                <i class="fa fa-chevron-right"></i> <a class="faq-toggle" href="#faq1">How can I plan my Wedding at Mayan Resorts?</a>
                <div id="faq1" class="content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </dd>

            <dd id="2" class="accordion-navigation">
                <i class="fa fa-chevron-right"></i> <a class="faq-toggle" href="#faq2">Do you offer a service to plan the event start to finish?</a>
                <div id="faq2" class="content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </dd>



$('.accordion-navigation').click(function() {
        var id = $(this).attr('id');

                if ($(id).hasClass('active')) {
                        $(id).find('i').removeClass('fa-chevron-right');
                        $(id).find('i').addClass('fa-chevron-down');
                }
                else if (!($('.accordion-navigation').hasClass('active'))) {
                        $('.accordion-navigation').find('i').addClass('fa-chevron-right');
                        $('.accordion-navigation').find('i').removeClass('fa-chevron-down');
                }
});

Answer 1

使用您的 this 实例和 toggleClass，您应该只需几行即可完成此操作:

$('.accordion-navigation').click(function() { 
    //Remove from all
    $('.accordion-navigation i').removeClass("fa-chevron-down").addClass("fa-chevron-right");    

    //Add to current
    $("i", this).toggleClass("fa-chevron-right fa-chevron-down");
});