Jquery 展开/折叠<；ul>；使用toggleclass（）.next.toggle（）

下面是我想要的工作方式。第一个列表项是带有加号图像的标题。单击图像/列表项时，第二个列表项将展开，标题旁边的图像将变为负号图像。然而，有一些列表项我想先用负号图像展开。当我从列表中删除style=“diplay:none”时，它会正确地显示为展开，但图像不会更改。如何使图像正确显示

$(function(){
    $('li.plus-image').click(function() {
        $(this).toggleClass("minus-image").next().toggle("fast");
     });     
});



<ul>
    <li class="plus-image">Display title</li>
    <li style="display: none;">
        <ul id="list-filter-items">     
            <li>bullet points</li>
            <li>bullet points</li>
        </ul>
    </li>
</ul>

$（函数（）{
$（'li.plus image'）。单击（函数（）{
$（this.toggleClass（“负图像”）.next（）.toggle（“快速”）；
});     
});

显示标题


要点
要点

我认为您可以将class=“减号图像”添加到您想要显示的图像中。此处缺少CSS，无需声明$this vard您可以设置小提琴吗？我按照请求设置了一个JSFIDLE