Slideup元素并删除已处于活动状态的元素上的类

debugcn 发表于 Dev

奥斯丁737

我创建了一个非常简单的菜单系统，单击该面板的相应选项卡后，该面板将向下滑动。一切正常，但我很难弄清楚如何向上滑动当前选中的选项卡的面板。如果您单击活动选项卡，它将以其当前形式再次向上和向下滑动。我的意思是，如果我单击与当前显示的面板相关的选项卡，我希望该面板简单地向上滑动并保持原位。

这是我到目前为止所使用的小提琴和js代码：http : //jsfiddle.net/jayboodev737/h77Lzj90/

$(function () {

     $('.main_panel ul li').on('click', function () {

        panelToShow = $(this).attr('data-panel');



        $('.main_panel ul li.active').removeClass('active');
        $(this).addClass('active');

        $('.main_panel .panel.active').slideUp(200, function () {
            $(this).removeClass('active novis');

            $('#' + panelToShow).slideDown(200, function () {
                $(this).addClass('active');

            });

        });
    });

});

看起来，如果检查活动选项卡上的类的if语句可以解决问题，但是我似乎什么也无法工作。任何想法将不胜感激。

阿伦·P·约翰尼（Arun P Johny）

您可以检查状态 $li

$(function () {

    $('.main_panel ul li').on('click', function () {
        var panelToShow = $(this).data('panel');

        $('.main_panel ul li.active').not(this).removeClass('active');
        var $li = $(this).toggleClass('active');

        if ($li.hasClass('active')) {
            $('.main_panel .panel.active').slideUp(200, function () {
                $(this).removeClass('active novis');
                $('#' + panelToShow).slideDown(200, function () {
                    $(this).addClass('active');
                });
            });
        }else{
            $('#' + panelToShow).slideUp(200, function () {
                $(this).addClass('active');
            });
        }
    });

});