title: How to Remove a Class from a Sibling of a Parent
body: <p>I'm working with the off-canvas script from Foundation and it isn't working out of the box (of course) when I try to use the submenu options. I realized it wasn't adding a class (move-right) to the ul's of the li's in the off-canvas navigation. So I wrote a script to add that class which can be found here:</p>
  
  <pre><code>jQuery(document).ready(function() {
      jQuery('ul.off-canvas-list li a').click(function() {
          jQuery('ul.off-canvas-list li ul.left-submenu').addClass('move-right');
  
      });
  });
  </code></pre>
  
  <p>And here is how my HTML is structured:</p>
  
  <pre><code>&lt;ul class="off-canvas-list"&gt;
      &lt;li class="has-submenu"&gt;&lt;a href="#"&gt;Name 1&lt;/a&gt;
          &lt;ul class="left-submenu"&gt;
              &lt;li class="back"&gt;&lt;a href="#"&gt;Back&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="has-submenu"&gt;&lt;a href="#"&gt;Name 2&lt;/a&gt;
          &lt;ul class="left-submenu"&gt;
              &lt;li class="back"&gt;&lt;a href="#"&gt;Back&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="has-submenu"&gt;&lt;a href="#"&gt;Name 3&lt;/a&gt;
          &lt;ul class="left-submenu"&gt;
              &lt;li class="back"&gt;&lt;a href="#"&gt;Back&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      ...etc
  &lt;/ul&gt; 
  </code></pre>
  
  <p>My problem is that my script is adding the class to ALL ul.left-submenu's instead of just the one directly under the li that I click on. I can't figure out how to add the class 'move-right' to only the 'ul.left-submenu' child of the parents li that I clicked on and remove the 'move-right' class from the other 'ul.left-submenu' </p>
  
  <p>I thought maybe using the sibling() selector, but I wasn't quite sure how to implement that into my script. Any and all help is greatly appreciated.</p>
  
  <p>Another issue has arose and that is being able to close the opened "ul.left-submenu" by clicking on the "Back</li>" which comes before the other li's in each ul.left-submenu. I updated the HTML above to include the "" and also have provided the script below that I tried using that hasn't worked. </p>
  
  <pre><code>jQuery('li.back').on('click', function() {
          console.log('close submenu');
          jQuery('ul.left-submenu').removeClass('move-right');
      });
  </code></pre>