Jquery Toggle循环

Question

我将这个特定的脚本用于特定的展开/折叠项，并且已经决定我希望能够在同一个页面上切换多个对象，但我不确定如何实现这一点。有人能提供任何洞察力吗？

$('#faq_info_header').click(function() {
    $('#faq_info_exp').toggle();
    var arrow = $('#faq_info_header').find('.fa');
    if (arrow.hasClass('fa-arrow-right')) {
        arrow.removeClass('fa-arrow-right');
        arrow.addClass('fa-arrow-down');
    } else if (arrow.hasClass('fa-arrow-down')) {
        arrow.removeClass('fa-arrow-down');
        arrow.addClass('fa-arrow-right');
    }
    return false;
});

HTML应请求：

<a id="faq_info_header">This is the question? <i class="fa fa-arrow-right"></i></a>

<div id="faq_info_exp" style="display:none;">This is the hidden content</div>

Answer 1

您可以使用toggleClass (更详细的http://api.jquery.com/toggleClass/)将整个if语句替换为：

arrow.toggleClass('fa-arrow-right fa-arrow-down');

好吧，我想我明白问题了。这是一个小提琴

HTML:

<div class="faqs">
    <div class="faq_item">
        <p>This is the question 1? <i class="fa fa-arrow-right"></i>
        </p>
        <div class="faq_info_exp">This is the hidden content 1</div>
    </div>
    <div class="faq_item">
        <p>This is the question 2? <i class="fa fa-arrow-right"></i>
        </p>
        <div class="faq_info_exp">This is the hidden content 2</div>
    </div>
    <div class="faq_item">
        <p>This is the question 3? <i class="fa fa-arrow-right"></i>
        </p>
        <div class="faq_info_exp">This is the hidden content 3</div>
    </div>
</div>

JS:

$('.faqs').on('click', '.faq_item', function () {
    $(this).children('.faq_info_exp').toggle();
    $(this).find('i').toggleClass('fa-arrow-right fa-arrow-down');
});

CSS:

.faq_info_exp {
    display: none;
}

基本上我所做的是：

1. 为了演示，我创建了几个更多的问答对。
2. 我用div包围了他们，并在其中添加了一个名为“常见问题”的类。通过这种方式，我们可以使用事件委托，并且只创建一个事件处理程序，而不是很多事件处理程序。
3. 我把每一个问题和相应的答案都用一个div包起来，并给了它一类“常见问题-项”。现在，我们可以在我们的处理程序中使用它，并确定哪个div分派了事件，并使用$(this)轻松地引用它。
4. 然后$(this).children('.faq_info_exp').toggle();找到带有类faq_info_exp的直接子元素并切换它。
5. 最后，$(this).find('i').toggleClass('fa-arrow-right fa-arrow-down');找到子类元素<i>并切换类。