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课程时被点击了
- 使用98px;
如果按钮在collapse课程时被点击了
- 使用98px从上到下为菜单设置动画。

编辑 - 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');
        });

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

1 个答案: