Question

我正在做一个检测window.resize事件的响应式菜单，当它符合最小浏览器宽度时，允许按钮的单击功能。如果浏览器宽度较大，则单击功能未绑定。我需要这样做，因为移动版本上的按钮是相同的元素，是桌面版本上的可视元素。

问题在于，使用我现在的代码，当页面加载（桌面或移动屏幕）时，单击功能正常工作。但是，如果我调整浏览器大小并再次单击该元素，它就不起作用。如果我想要移动导航工作，我需要刷新页面使其工作。真烦人。

为了帮助理解正在发生的事情，我做了一个简单的例子。这里是简单的代码（仅用于检查点击功能问题）

HTML

<!-- WRAPPER -->
<div id="freakers-wrapper">
    <!-- HEADER -->
    <header id="header">
        <div class="header-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <!-- MENU -->
                        <nav class="menu-wrapper-left">
                            <a class="menu-trigger" href="#">
                                <span></span>
                            </a>

                            <ul id="main-menu" class="menu menu--main menu--left main-menu">
                                <li><a href="#">Home</a></li>

                                <li class="has-children">
                                    <a href="#">Shop</a>

                                    <ul class="sub-menu is-hidden">
                                        <li class="go-back"><a href="#">Back</a></li>
                                        <li><a href="#">Shop 1</a></li>
                                        <li><a href="#">Shop 2</a></li>
                                        <li><a href="#">Shop 3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" >Blog</a></li>
                            </ul>   <!-- end main-menu -->
                        </nav>  <!-- end menu-wrapper -->
                    </div>

                    <div class="col-md-2">
                        <div class="logo">
                            <a href="#">
                                <img src="images/logo.png" alt="Logo" class="img-responsive">
                            </a>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <!-- MENU -->
                        <nav class="menu-wrapper-right">
                            <ul id="main-menu" class="menu menu--main menu--right main-menu">
                                <li><a href="#">help</a></li>
                                <li><a href="#">lookbook</a></li>
                                <li><a href="#">model</a></li>
                            </ul>   <!-- end main-menu -->
                        </nav>  <!-- end menu-wrapper -->
                    </div>
                </div>
            </div>
        </div>  <!-- end header-bottom -->
    </header>   <!-- end header -->

    <!-- MOBILE NAV -->
    <div id="mobile-nav"></div>
</div>  <!-- end freakers-wrapper -->

JS

(function($) {
    "use strict";

    $(document).ready(function () {

        $(window).on('load resize', function(){
            moveNavigation();
        });

        /* ----------------------------------------------------------------------
            Main Menu
        ---------------------------------------------------------------------- */

        //if you change this breakpoint, don't forget to update this value as well
        var MqL = 1030,
            menuLeft = $('.menu-wrapper-left').html(),
            menuRight = $('.menu-wrapper-right').html();
            console.log(menuRight);
            console.log(menuLeft);
        //move nav element position according to window width
        // moveNavigation();

        //mobile - open lateral menu clicking on the menu icon
        $(document).on('click', '.menu-trigger', function(event){
            event.preventDefault();
            if($('#freakers-wrapper').hasClass('push-content')){
                closeNav();
            }else{
                $('#freakers-wrapper').addClass('push-content');
                $('#mobile-nav .menu').addClass('menu--open');
                $(this).addClass('nav-is-visible');
            }
        });

        //open submenu
        $('.has-children').on('click', function(event){
            var selected = $(this);
            if( selected.children('ul').hasClass('is-hidden') ) {
                selected.children('ul').removeClass('is-hidden');
            }
        });

        //submenu items - go back link
        $('.go-back').on('click', function(evt){
            evt.stopPropagation();
            $(this).parent('ul')
                .addClass('is-hidden')
                .parent('.has-children')
                .parent('ul');
        });

        function closeNav(){
            $('#freakers-wrapper').removeClass('push-content');
            $('.menu--main').removeClass('menu--open');
            $('.has-children ul').addClass('is-hidden');
        }

        function checkWindowWidth() {
            //check window width (scrollbar included)
            var e = window, 
                a = 'inner';
            if (!('innerWidth' in window )) {
                a = 'client';
                e = document.documentElement || document.body;
            }
            if ( e[ a+'Width' ] >= MqL ){
                closeNav();

                if ( $('.menu-trigger').hasClass('menu-trigger-open') ){
                    $('.menu-trigger').removeClass('menu-trigger-open');
                }
                return true;
            } else {

                var menuElm = $('.main-menu .has-children');

                if($('.sub-menu ul', menuElm).hasClass('left-menu')){
                    $('.sub-menu ul', menuElm).removeClass('left-menu');
                }
                return false;
            }
        }

        function moveNavigation(){
            var navigation = $('.menu--main'),
                desktop = checkWindowWidth();

            if ( desktop ) {
                $('#mobile-nav').children().remove();
                $('.menu-wrapper-left').html(menuLeft);
                $('.menu-wrapper-right').html(menuRight);
            } else {
                navigation.appendTo('#mobile-nav');
                $('.menu--main').not(':first').remove().children('li').appendTo('.menu--main:first');
            }
        }

        $(".menu-trigger").click(function() {
            $(this).toggleClass("menu-trigger-open");
        });
    });
}(jQuery));

如果你想看到它的实际效果，我已经制作了一个Codepen（尝试调整大小以使其正常工作）

http://codepen.io/thehung1724/full/JYmzWr/

我希望我能很好地解释我的问题。我已经搜索过，并没有找到解决这个问题的方法（或者我可能并不知道该寻找什么）。虽然当您调整屏幕大小时，仍然可以点击菜单图标，但请注意它没有转换为'X'字母，您无法点击显示子菜单

作品

不能工作

任何帮助将不胜感激！

Answer 1

一个简单的解决方法是替换

$('.has-children').on('click', function(event){

与

$(document).on('click', '.has-children', function (event) {

当您将导航从一个地方克隆到另一个地方时，您将失去指向.has-children的点击功能的指针

使用$（document）.on ....你实际上是将函数绑定到没有被处置的文档。

更新：替换以下javascript部分

        $('.has-children').on('click', function (event) {
            var selected = $(this);
            if (selected.children('ul').hasClass('is-hidden')) {
                selected.children('ul').removeClass('is-hidden');
            }
        });
        $('.go-back').on('click', function (evt) {
            evt.stopPropagation();
            $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul');
        });

用

    $(document).on('click', '.has-children', function (event) {
        var selected = $(this);
        if (selected.children('ul').hasClass('is-hidden')) {
            selected.children('ul').removeClass('is-hidden');
        }
    });
    $(document).on('click', '.go-back', function (evt) {
        evt.stopPropagation();
        $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul');
    });

进一步更新：我已使用上述更改在CodePen中编写代码：http://codepen.io/anon/pen/JYmVXm

Jquery - 点击事件在调整大小后

1 个答案: