Question

请帮我解决多级手风琴菜单的开关加/减问题。我无法理解如何使加号和减号正确切换为http://www.nextendweb.com/demo/accordionmenu/vehicles-bold/car.html

编写了一个完全正常工作的代码，但切换http://jsfiddle.net/a525drwp/

除外

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>

的JavaScript

$(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('js_open')) {
                jsPro.removeClass('js_open');
                jsPro.find('li').removeClass('js_open');
                jsPro.find('ul').slideUp();
            }
            else {
                jsPro.addClass('js_open');
                jsPro.children('ul').slideDown();
                jsPro.siblings('li').children('ul').slideUp();
                jsPro.siblings('li').removeClass('js_open');
                jsPro.siblings('li').find('li').removeClass('js_open');
                jsPro.siblings('li').find('ul').slideUp();
            }
            event.preventDefault();
        });

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


        //switch plus / minus (does not work properly)
        $('.fa-plus').click(function() {
            $('.js_slider').removeClass("fa-minus").addClass("fa-plus");
            $(this).toggleClass("fa-minus fa-plus ");
        });



    });// and ready

CSS

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

请帮帮我！

Answer 1

这有效：JSFiddle

我正在添加和删除 fa-plus 和 fa-minus ，这更容易：）

$(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

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

1 个答案: