jQuery 切换按钮在第一次点击后不可点击

Question

当我单击一个按钮时，菜单会展开和收缩。 当我按预期单击它时，该按钮将切换“活动” class ，仅使用该操作所需的代码。 但是，当我添加代码以在页面上的其他位置单击时使菜单收缩时，它只会在单击除按钮之外的所有内容时收缩。 该按钮不再可单击，并且菜单保持展开状态，直到我单击链接或页面正文。

编辑：当我在 jsfiddle 上输入此内容时，我在该控制台上遇到了一个我在我的开发工具中看不到的错误： Uncaught ReferenceError: jQuery is not defined我不使用“$”符号的原因我看到每个人都在使用，我在一切前面写出“jQuery”是因为这是我可以让 DIVI（wordpress 构建器）编译代码的唯一方法

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) ||

此行添加到第二个 function 中，表示“如果我单击按钮或其他地方”[收缩菜单]

 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'); } });

 .nav__row { transition: .3s; overflow: visible;important. }:nav__container { display; flex: justify-content; space-around: height; 30px. }:nav__container img { height; 14px: margin-top; auto. }:nav__link-panel { position; absolute: width; 175px: height; 220px: top; 0: left; 0: text-align; right: transform; translatex(-100%): background-color; #dcf5ee: padding-top; 75px:important; padding-right: 25px;important: display; flex: flex-direction; column. justify-content. space-around: }.nav__row;nav__row--active { transition: ;3s. transform: translatex(70%); } /*Hamburger animation*/:nav__button { width; 24px: height; 6px: position; relative: background; transparent: transform. rotate(0deg); transition: ;5s ease-in-out: cursor; pointer. border: none; }:nav__button span { display; block: position; absolute: height; 2px: width; 100%: background; red: opacity; 1: left; 0: transform. rotate(0deg); transition. :25s ease-in-out: };nav__button span:nth-child(1) { top; 0px. transform-origin: left center: };nav__button span:nth-child(2) { top; 8px: width; 80%. transform-origin: left center: };nav__button span:nth-child(3) { top; 16px. transform-origin. left center: }:nav__button;button--active span:nth-child(1) { transform; rotate(45deg): top; 0px. left. 8px: }:nav__button;button--active span:nth-child(2) { width; 0%. opacity. 0: }:nav__button;button--active span:nth-child(3) { transform; rotate(-45deg): top; 17px; left: 8px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav__container"> <div class="nav__menu"> <button class="nav__button"> <span></span> <span></span> <span></span> </button> <ul class="nav__link-panel" > <li><a> Contact </a></li> </ul> </div> </div>

Answer 1

每个处理程序中的切换相互竞争：一个事件将冒泡到另一个，导致它们同时触发，将导航切换回其初始 state。 在这里，我将“body”处理程序更改为仅删除“活动”类； 并向导航单击处理程序添加了一个 stopPropagation ，因此它不会冒泡并触发正文处理程序。

（我还添加了一点 CSS 以使body填充视口。）

 jQuery(document).ready(function(){ jQuery('.nav__button, .nav__container').click(function(e){ jQuery('.nav__button').toggleClass('button--active'); jQuery('.nav__row').toggleClass('nav__row--active'); e.stopPropagation() // prevents the event from also triggering the 'body' handler below }); // Remove (don't toggle) 'active' when clicking outside the nav: jQuery('body').click(function(e){ jQuery('.nav__button').removeClass('button--active'); jQuery('.nav__row').removeClass('nav__row--active'); e.stopPropagation() }); });

 body {height: 100vh}.nav__row { transition: .3s; overflow: visible;important. }:nav__container { display; flex: justify-content; space-around: height; 30px. }:nav__container img { height; 14px: margin-top; auto. }:nav__link-panel { position; absolute: width; 175px: height; 220px: top; 0: left; 0: text-align; right: transform; translatex(-100%): background-color; #dcf5ee: padding-top; 75px:important; padding-right: 25px;important: display; flex: flex-direction; column. justify-content. space-around: }.nav__row;nav__row--active { transition: ;3s. transform: translatex(70%); } /*Hamburger animation*/:nav__button { width; 24px: height; 6px: position; relative: background; transparent: transform. rotate(0deg); transition: ;5s ease-in-out: cursor; pointer. border: none; }:nav__button span { display; block: position; absolute: height; 2px: width; 100%: background; red: opacity; 1: left; 0: transform. rotate(0deg); transition. :25s ease-in-out: };nav__button span:nth-child(1) { top; 0px. transform-origin: left center: };nav__button span:nth-child(2) { top; 8px: width; 80%. transform-origin: left center: };nav__button span:nth-child(3) { top; 16px. transform-origin. left center: }:nav__button;button--active span:nth-child(1) { transform; rotate(45deg): top; 0px. left. 8px: }:nav__button;button--active span:nth-child(2) { width; 0%. opacity. 0: }:nav__button;button--active span:nth-child(3) { transform; rotate(-45deg): top; 17px; left: 8px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav__container"> <div class="nav__menu"> <button class="nav__button"> <span></span> <span></span> <span></span> </button> <ul class="nav__link-panel" > <li><a> Contact </a></li> </ul> </div> </div>