title: jQuery Toggle button not clickable after first click
body: <p>The menu expands and contracts when I click on a button.
  The button toggles the &quot;active&quot; class when I click it as expected with only the code required for that action.
  However, when I add the code to make the the menu contract when clicking elsewhere on the page, it only contracts when clicking everything EXCEPT for the button.
  The button is no longer clickable and the menu remains expanded until I click on a link or on the body of the page.</p>
  <p>EDIT: As I was typing this out on a jsfiddle, I got an error on that console that I don't see in my dev tools:
  <strong>Uncaught ReferenceError: jQuery is not defined</strong>
  The reason why I am not using the &quot;$&quot;symbol that I see everyone using, and I am writting out &quot;jQuery&quot; in front of everything is because that's the only way I could make DIVI (the wordpress builder) compile the code</p>
  <pre><code>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 =&gt; {
  
     if (!jQuery('nav__container').is(e.target)
     &amp;&amp; jQuery('nav__container').has(e.target).length === 0) {
  
       jQuery('.nav__row').removeClass('nav__row--active');
       jQuery('.nav__button').removeClass('button--active');
    }
   });
      
  
  </code></pre>
  <p>And If I add this line of code, I break the code all together.</p>
  <pre><code>jQuery('.nav__button').is(e.target) ||
  </code></pre>
  <p>This line is added to the second function, to say that &quot;If I click on the button OR elsewhere&quot; [contract the menu]</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
  
     if (!jQuery('nav__container').is(e.target)
     &amp;&amp; jQuery('nav__container').has(e.target).length === 0) {
  
       jQuery('.nav__row').removeClass('nav__row--active');
       jQuery('.nav__button').removeClass('button--active');
    }
   });
      </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="nav__container"&gt;
      &lt;div class="nav__menu"&gt;
           &lt;button class="nav__button"&gt;
               &lt;span&gt;&lt;/span&gt;
               &lt;span&gt;&lt;/span&gt;
               &lt;span&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;ul class="nav__link-panel" &gt;
               &lt;li&gt;&lt;a&gt; Contact &lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>