0

您好，我正在尝试制作我的网站的响应版本，但导航遇到了一些问题，下面的代码工作......有点。我想要它，以便当文档小于 600px 时它会触发 jquery 代码，现在如果我进入页面时它超过 600px 它按预期工作，然后我调整窗口大小使其小于 600px 并且代码触发，然后我单击出现的导航按钮，“滑动切换”不断触发，因此导航在保持关闭之前上下移动几次。但是，如果屏幕尺寸小于 600 像素，开始时它可以正常工作，然后一旦扩展到超过 600 像素，jquery 仍然存在，所以当我单击按钮时，代码会触发并再次上下滑动，一遍又一遍，任何人都有任何想法：S代码基于本教程这里谢谢您的帮助。

jQuery(document).ready(function ($){
    $(window).on('resize', function () {
        var windowsize = $(window).width();
        if (windowsize < 600) {
            $("#mmenu").hide();
            $(".mtoggle").click(function() {
                $("#mmenu").slideToggle(500);
                $("#mmenu li").click(function(){
                    $("#mmenu").slideUp(500);
                });
            });
        }
    }).trigger('resize');
});

编辑：我修复了切换问题，问题是slideToggle，我只需要将其更改为slideDown，根本不会因为没有注意到这一点而觉得自己像个白痴，但是当我把屏幕变大时它仍然会触发，我尝试了一个 else 语句> 600 但这并没有什么。

4

1 回答 1

1

使用 JQuery 快速回顾事件。每次调用.clickJQuery 变量时，实际上都是在将事件处理程序绑定到该 DOM 元素。因此，例如这段代码：

$(".mtoggle").click(function() {
    $("#mmenu").slideToggle(500);
    $("#mmenu li").click(function(){
        $("#mmenu").slideUp(500);
    });
});

每次单击元素时，此代码都会将单击处理程序绑定到#mmenu li元素。所以 's click 事件实际上会发生多次。.mtoggle#menu li

要解决您的调整大小问题，听起来您正在寻找的是.unbind方法（http://api.jquery.com/unbind/）。如果你想让它.mtoggle在你调整到大于 600px 时元素上没有事件处理程序，你将不得不调用这个方法：

$(".mtoggle").unbind('click');

它将所有click事件处理程序与元素分离。

于 2013-10-19T17:41:30.953 回答