jQuery/JS 函数仅在触发按钮时起作用答案

【问题标题】：jQuery/JS function to work only when a button is triggeredjQuery/JS 函数仅在触发按钮时起作用
【发布时间】：2014-01-28 11:23:04
【问题描述】：

我已经制作了这样的 jQuery 函数：

jQuery(document).ready(function ($) {
    $("#mmenu").hide();
    $("#cover").hide();
    var wys = $('#mmenu').height();
    console.log('wys: ' + wys);
    $(".mtoggle").click(function () {
        $("#mmenu").slideToggle(500);
        $("#cover").fadeToggle("400", "swing");
        $(window).scroll(function (e) {
            if ($(window).scrollTop() > wys) {
                var limit = wys + 50;
                $(window).scrollTop(limit);
            }
        });

        $(window).scrollTop(wys);

    });
});

它切换菜单#mmenu 的滑动，淡入或淡出#cover div，这会使菜单后面的整个区域变暗并在某个点禁用滚动。问题是我希望 scrollTop 功能仅在菜单打开时（单击按钮时）起作用，并且在菜单再次隐藏时停止工作。现在，当我打开菜单时它开始工作，但是当我关闭它时，滚动保持禁用状态。如何使此功能仅在菜单打开时才起作用？

【问题讨论】：

标签： javascript jquery function toggle

【解决方案1】：

如果我正确理解您的要求，那么您需要根据菜单是否打开/关闭来注册/删除滚动处理程序。

一个简单的解决方案是使用如下所示的标志

jQuery(document).ready(function ($) {
    $("#mmenu").hide();
    $("#cover").hide();
    var wys = $('#mmenu').height();

    //flag to keep track of open status
    var open = false;

    console.log('wys: ' + wys);
    $(".mtoggle").click(function () {
        $("#mmenu").slideToggle(500);
        $("#cover").fadeToggle("400", "swing");

        //if already opened then remove the handler
        if (open) {
            $(window).off('scroll.menuopen');
        } else {
            //if opening now then register the handler
            $(window).on('scroll.menuopen', scrollHandler);
            $(window).scrollTop(wys);
        }
        //toggle the open status
        open = !open;
    });

    function scrollHandler(e) {
        if ($(window).scrollTop() > wys) {
            var limit = wys + 50;
            $(window).scrollTop(limit);
        }
    }
});

【讨论】：

【解决方案2】：

您可以检查菜单是否为:visible

jQuery(document).ready(function ($) {
    $("#mmenu").hide();
    $("#cover").hide();
    var wys = $('#mmenu').height();
    console.log('wys: ' + wys);
    $(".mtoggle").click(function () {
        $("#mmenu").slideToggle(500);
        $("#cover").fadeToggle("400", "swing");
        if($("#mmenu").is(':visible')){ //BEGIN - Check whether the menu is visible
            $(window).scroll(function (e) {
                if ($(window).scrollTop() > wys) {
                    var limit = wys + 50;
                    $(window).scrollTop(limit);
                }
            });
            $(window).scrollTop(wys);
        } //END


    });
});

【讨论】：