Javascript 如何在单击变量ID时添加/删除子元素的类？

我有一个手风琴，我在FAQ页面上使用。单击特定问题时，部分箭头需要从右向下更改。所有其他人都需要默认返回右侧。我错过了什么才能让它发挥作用

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

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
$（'.accordion导航'）。单击（函数（）{
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导航”）.find（'i'）.addClass（'fa-chevron-right'）；
$（“.accordion导航”）.find（'i'）.removeClass（'fa-chevron-down'）；
}
});

使用您的

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

---

我不知道为什么它不起作用，但我制定了自己的解决方案-CSS和JS组合

---

顺便说一句：如果页面上有多个手风琴

dl

，他将不得不使用

.closest（'dd'）.sides（）.find（'i.fa'）

或类似的方法来隔离它。这种添加到current的方法不起作用。要切换的页面上不存在fa V形向下。它需要替换那里的fa chevon right。此实例中只有一个DL。@ScottBlair--如果它不存在，

toggle

将添加它。我编辑了选择器，它应该在

I

-my bad上切换类。这非常接近。如果单击相同的，只需将箭头切换回右侧即可。手风琴导航可自动关闭。现在，它保留了向下箭头。效果非常好。谢谢

$(document).on('click', '.faq-toggle' ,function (e) {
    if($(this).prev().hasClass('fa-chevron-down')) {
        $(this).prev().removeClass('fa-chevron-down');
        $(this).prev().addClass('fa-chevron-right');
    } else {
        $(this).parents('body').find('.fa.fa-chevron-down').each(function (e) {
            $(this).removeClass('fa-chevron-down');
            $(this).addClass('fa-chevron-right');
        });

        $(this).prev().removeClass('fa-chevron-right');
        $(this).prev().addClass('fa-chevron-down');
    }
});