Javascript 第一次单击后无法单击jQuery切换按钮

当我单击按钮时，菜单会展开和收缩。 当我按预期单击“active”类时，该按钮将切换该类，其中仅包含该操作所需的代码。 但是，当我添加代码使菜单在单击页面上其他位置时收缩时，它仅在单击除按钮之外的所有内容时收缩。 该按钮不再可单击，菜单保持展开状态，直到我单击链接或页面主体

编辑：当我在一个JSFIDLE上键入这个时，我在那个控制台上得到了一个错误，我在我的开发工具中没有看到这个错误： 未捕获引用错误：未定义jQuery 我之所以不使用大家都使用的“$”符号，并且在所有东西前面写下“jQuery”，是因为这是我让DIVI（wordpress builder）编译代码的唯一方法

jQuery(document).ready(function(){
    
    jQuery('.nav__button').click(function(){

        jQuery(this).toggleClass('button--active');
        jQuery('.nav__row').toggleClass('nav__row--active');

    });
}); 
    
jQuery(document).mouseup(e => {

   if (!jQuery('nav__container').is(e.target)
   && jQuery('nav__container').has(e.target).length === 0) {

     jQuery('.nav__row').removeClass('nav__row--active');
     jQuery('.nav__button').removeClass('button--active');
  }
 });
    

如果我加上这一行代码，我会把代码一起分解

jQuery('.nav__button').is(e.target) ||

这一行被添加到第二个函数中，表示“如果我点击按钮或其他地方”[收缩菜单]

jQuery（文档）.ready（函数（）{
jQuery（'.nav__按钮'）。单击（函数（）{
jQuery（this.toggleClass（'button--active'）；
jQuery（'.nav__行'）.toggleClass（'nav_行--active'）；
});
}); 
jQuery（document）.mouseup（e=>{
如果（！jQuery（'nav__容器'）是（e.target）
&&jQuery（'nav__容器'）。has（e.target）。length==0）{
jQuery（'.nav__行'）.removeClass（'nav_行--active'）；
jQuery（'.nav__按钮'）.removeClass（'button--active'）；
}
});

.nav\uu行{
过渡：.3s；
溢出：可见！重要；
}
.导航集装箱{
显示器：flex；
证明内容：周围的空间；
高度：30px；
}
.nav___集装箱img{
高度：14px；
页边顶部：自动；
}
.导航链接面板{
位置：绝对位置；
宽度：175px；
高度：220px；
排名：0；
左：0；
文本对齐：右对齐；
转化：translatex（-100%）；
背景色：#dcf5ee；
填充顶部：75px！重要；
右边填充：25px！重要；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.nav__行。nav__行-激活{
过渡：.3s；
转化：translatex（70%）；
}
/*汉堡动画*/
.导航按钮{
宽度：24px；
高度：6px；
位置：相对位置；
背景：透明；
变换：旋转（0度）；
过渡：.5s易进易出；
光标：指针；
边界：无；
}
.导航按钮跨度{
显示：块；
位置：绝对位置；
高度：2倍；
宽度：100%；
背景：红色；
不透明度：1；
左：0；
变换：旋转（0度）；
转换：.25秒轻松输入输出；
}
.nav__按钮跨度：第n个子项（1）{
顶部：0px；
变换原点：左中心；
}
.导航按钮跨度：第n个子项（2）{
顶部：8px；
宽度：80%；
变换原点：左中心；
}
.导航按钮跨度：第n个子项（3）{
顶部：16px；
变换原点：左中心；
}
.nav__按钮.button--活动范围：第n个子项（1）{
变换：旋转（45度）；
顶部：0px；
左：8px；
}
.nav__按钮.button--活动范围：第n个子项（2）{
宽度：0%；
不透明度：0；
}
.nav__按钮.button--活动范围：第n个子项（3）{
变换：旋转（-45度）；
顶部：17px；
左：8px；
}

接触

每个处理程序中的切换都在相互竞争，从一个处理程序到另一个处理程序的事件将冒泡，导致它们同时触发，将导航向右切换回其初始状态。在这里，我将“body”处理程序更改为只删除“active”类；并在导航点击处理程序中添加了一个stopPropagation，这样它就不会冒泡，也不会触发body处理程序

（我还添加了一些CSS，以使

body

填充视口。）

jQuery（document）.ready（function（）{
jQuery（'.nav___按钮，.nav_容器'）。单击（函数（e）{
jQuery（'.nav__按钮'）.toggleClass（'button--active'）；
jQuery（'.nav__行'）.toggleClass（'nav_行--active'）；
e、 stopPropagation（）//防止事件同时触发下面的“body”处理程序
});
//在导航外单击时删除（不切换）“活动”：
jQuery（'body'）。单击（函数（e）{
jQuery（'.nav__按钮'）.removeClass（'button--active'）；
jQuery（'.nav__行'）.removeClass（'nav_行--active'）；
e、 停止传播（）
});
}); 
body{height:100vh}
.nav___行{
过渡：.3s；
溢出：可见！重要；
}
.导航集装箱{
显示器：flex；
证明内容：周围的空间；
高度：30px；
}
.nav___集装箱img{
高度：14px；
页边顶部：自动；
}
.导航链接面板{
位置：绝对位置；
宽度：175px；
高度：220px；
排名：0；
左：0；
文本对齐：右对齐；
转化：translatex（-100%）；
背景色：#dcf5ee；
填充顶部：75px！重要；
右边填充：25px！重要；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.nav__行。nav__行-激活{
过渡：.3s；
转化：translatex（70%）；
}
/*汉堡动画*/
.导航按钮{
宽度：24px；
高度：6px；
位置：相对位置；
背景：透明；
变换：旋转（0度）；
过渡：.5s易进易出；
光标：指针；
边界：无；
}
.导航按钮跨度{
显示：块；
位置：绝对位置；
高度：2倍；
宽度：100%；
背景：红色；
不透明度：1；
左：0；
变换：旋转（0度）；
转换：.25秒轻松输入输出；
}
.nav__按钮跨度：第n个子项（1）{
顶部：0px；
变换原点：左中心；
}
.导航按钮跨度：第n个子项（2）{
顶部：8px；
宽度：80%；
变换原点：左中心；
}
.导航按钮跨度：第n个子项（3）{
顶部：16px；
变换原点：左中心；
}
.nav__按钮.button--活动范围：第n个子项（1）{
变换：旋转（45度）；
顶部：0px；
左：8px；
}
.nav__按钮.button--活动范围：第n个子项（2）{
宽度：0%；
不透明度：0；
}
.nav__按钮.button--活动范围：第n个子项（3）{
变换：旋转（-45de）