jQuery切换类并在单击时更改它

Question

我的 JS 文件中有以下代码：

jQuery("document").ready(function (e) {
        var menu = e(".menu-container");
        var button = e(".menu-functions");
        e(window).scroll(function () {
                if (e(this)
                    .scrollTop() > 150) {
                    menu.addClass("f-nav");
                    button.addClass("collapse-expand");
                    button.addClass('collapse');
                } else {
                    menu.removeClass("f-nav");
                    button.removeClass("collapse");
                    button.removeClass("expand");
                    button.removeClass("collapse-expand");
                }
            });
        //problem area
        $('#menu-functions').click(function(){
            if(button.hasClass('collapse'))
            {
                button.addClass('expand');
                button.removeClass('collapse');
            }
            if(button.hasClass('expand'))
            {
                button.addClass('collapse');
                button.removeClass('expand');
            }
        });
});

现在我需要让// problem area 下的部分开始工作。我认为 jQuery 中有一个 toggleClass，对吧？一些高级条件可以解决问题，但是我仍在学习，我需要一些帮助。无论按钮状态是展开还是折叠，我还需要找到animate() .menu-container div 的方法：

• 如果按钮在具有expand 类时被单击
  • 用 98 像素从下到上为菜单设置动画；
• 如果按钮在具有collapse 类时被单击
  • 使用 98 像素从上到下为菜单设置动画。

编辑 - JSFIDDLE： jsfiddle.net/rcdhnh7L

Answer 1

试试这样吧。不要使用 e 作为 jQuery 的 var，这很奇怪。而且我简化了问题区域，直接抓取你想要的元素，而不是迭代现有的集合。

jQuery("document").ready(function ($) {
    var menu = $(".menu-container");
    var button = $(".menu-functions");
    $(window).scroll(function () {
        if ($(this)
            .scrollTop() > 150) {
            menu.addClass("f-nav");
            button.addClass("collapse-expand");
            button.addClass('collapse');
        } else {
            menu.removeClass("f-nav");
            button.removeClass("collapse");
            button.removeClass("expand");
            button.removeClass("collapse-expand");
        }
    });
    //problem area
    $('#menu-functions').click(function () {
        $('.menu-functions.collapse').addClass('expand').removeClass('collapse');
        $('.menu-functions.expand').addClass('collapse').removeClass('expand');
    });
});

或者这也应该有效：

        //problem area
        $('#menu-functions').click(function () {
            $('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
        });