Question

我已经尝试使用Google搜索，但我不完全确定我应该使用哪些关键字，所以我要空了。无论如何，我觉得我错过了一些相对简单的功能和他们解雇的方式。

我想要的功能是这样的：我的导航栏旁边有一个小箭头，结构为＆＃34; .menu-item-has-children a i＆＃34;。在移动设备上（低于880像素），我想点击<i>元素并让它切换下面的<ul>。在桌面上，我不知道。这可以正常工作，直到我在这两个视口大小（低于880和高于880）之间切换。然后，在我重新加载页面之前，所需的功能不会被激活。我的jQuery看起来像这样：

jQuery(document.ready(function($) {
   function mobileNav() {
       var w = $(window).width(); 

       if (w < 879) {
           $('.menu-item-has-children a i').click(function(e) {
               e.preventDefault();
               $(this).parents('menu-item-has-children').children('ul').toggle();
               $(this).toggleClass('turned');
           });
       }
   }

    mobileNav();

    jQuery(window).resize(function($) {
        mobileNav();
    });
});

Answer 1

我不完全确定，但我认为它不起作用的原因是因为.

行中menu-item-has-children前面没有$(this).parents('menu-item-has-children').children('ul').toggle();

fwiw，你可以使用click处理程序的委托语法，它消除了对domReady的需要并消除了resize函数，因为我们在调整屏幕大小时实际上并没有运行任何行为。我们只关心点击.menu-item-has-children a i个节点时会发生什么。因此，我们可以在每次点击时检查屏幕尺寸。

   jQuery(document).on('click', '.menu-item-has-children a i', function(e) {
       var $ = jQuery;
       var $this = $(this);
       e.preventDefault();
       if (879 < $(window).width()) {
           $this.parents('.menu-item-has-children').children('ul').toggle();
           $this.toggleClass('turned');
       }
   });

在调整大小时启用不同的功能

1 个答案: