如何使用javascript仅选择一个li元素？

这应该是一个简单的修复方法，但我还不能完全理解javascript选择器。我有一个H3Li元素列表，每个元素都包含单击时显示的内容。我想要一个切换箭头，以改变从上到下点击。但是在下面的JS代码中，所有li元素都会发生这种情况，包括没有显示折叠内容的元素。我怎样才能解决这个问题

$(document).ready(function () {

$('#toggle-view li').click(function () {
    var text = $(this).children('div.panel');
    if (text.is(':hidden')) {
        text.slideDown('200');
        $("h3 .fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
    } else {
        text.slideUp('200');
        $("h3 .fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
    }

});
});

以下是html，以备您需要：

<ul class="services-ul facebook-ul" id="toggle-view">
        <li>
        <h3><i class="fa fa-check"></i>Header 1<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
        <li>
        <h3><i class="fa fa-check"></i>Header 2<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
        <li>
        <h3><i class="fa fa-check"></i>Header 3<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
        <li>
        <h3><i class="fa fa-check"></i>Header 4<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
    </ul>

标题1
+
虚拟文本



标题2
+
虚拟文本



标题3
+
虚拟文本



标题4
+
虚拟文本

您需要指定与

此

相关的元素（在

单击

事件中是已单击的

li

元素）

只需将

this

包装在jQuery选择器中（

$（this）

），然后使用查找其中包含的元素：

$(this).find('.fa-caret-up').removeClass('.fa-caret-up').addClass('.fa-caret-down');

以及：

---

效果很好。请注意，在我需要删除的.removeClass和.addClass之前的第一行代码中有两个点。

$(this).find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up');