Jquery 手风琴菜单开关加号/减号不能正常工作

请帮我解决多级手风琴菜单加/减开关的问题。 我不明白如何像这里那样正确地做正负开关

写了一个完整的工作代码，除了开关

HTML

<ul>
    <li class="js_slider"><a href="#">Level-1</a>
        <ul>
            <li class="js_slider"><a href="#">Level-2</a>
                <ul>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                </ul>
            </li>
            <li class="js_slider"><a href="#">Level-2</a>
                <ul>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li class="js_slider"><a href="#">Level-1</a>
        <ul>
            <li class="js_slider"><a href="#">Level-2</a>
                <ul>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                </ul>
            </li>
            <li class="js_slider"><a href="#">Level-2</a>
                <ul>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li class="js_slider"><a href="#">Level-1</a>
        <ul>
            <li class="js_slider"><a href="#">Level-2</a>
                <ul>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                </ul>
            </li>
            <li class="js_slider"><a href="#">Level-2</a>
                <ul>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                    <li><a href="#">Level-3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

li {list-style: none;display: block !important;padding: 5px 0;}
a {text-decoration: none;padding-left: 5px;}

请帮帮我

此功能：

我正在添加和删除fa加和fa减，这要容易得多：）

---

一切正常！非常感谢你！注意到错误。如果打开子菜单，它不会继续关闭，而是关闭父菜单。重新打开父对象后，子对象将以负号保持关闭状态。我的答案已经编辑好了。如果你愿意，你可以在第一张幻灯片上添加一个回调，这样你就不会看到图标的变化。我发现了另一个bug，它在你的3级li中添加了一个+图标。在另一次编辑中修复了它：）出色的菜单出现了！

li {list-style: none;display: block !important;padding: 5px 0;}
a {text-decoration: none;padding-left: 5px;}

$(document).ready(function() {
    // hide submenu (works well)
    $('.js_slider ul').hide();

    // accordion multilevel menu (works well)
    $('.js_slider > a').on('click', function(event){
        var jsPro = $(this).parent('li');
        if (jsPro.hasClass('fa-minus')) {
            jsPro.removeClass('fa-minus');
            jsPro.addClass('fa-plus');
            jsPro.children().find('li.fa-minus').addClass('fa-plus');
            jsPro.children().find('li').removeClass('fa-minus');
            jsPro.find('ul').slideUp();
        }
        else {
            jsPro.addClass('fa-minus');
            jsPro.removeClass('fa-plus');
            jsPro.children('ul').slideDown();
            jsPro.siblings('li').children('ul').slideUp();
            jsPro.siblings('li.fa-minus').addClass('fa-plus');
            jsPro.siblings('li').removeClass('fa-minus');
            jsPro.siblings('li').find('li.fa-minus').addClass('fa-plus');
            jsPro.siblings('li').find('li').removeClass('fa-minus');
            jsPro.siblings('li').find('ul').slideUp();
        }
        event.preventDefault();
    });

    // add font-awesome icon
    $('.js_slider').addClass("fa fa-plus");
});// and ready