Question

我创建了一个非常简单的菜单系统，当单击其相应的选项卡时，面板将向下滑动。一切正常，但我很难搞清楚如何向上滑动当前所选标签的面板。在当前形式下，如果单击活动选项卡，它将再次向上滑动并再次向下滑动。我的意思是，如果我点击与当前显示的面板相关的选项卡，我希望该面板只需向上滑动并保持不变。

这是我到目前为止的小提琴和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语句检查活动选项卡上的类是否会起作用，但我似乎无法使用任何东西。任何想法都将不胜感激。

Answer 1

您可以检查$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');
            });
        }
    });

});

演示：Fiddle

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

1 个答案: