Add class to element when clicked elsewhere + condition on class presence

I’m having a sliding menu with sub-menus. I’m trying to hide an element in the navigation row when a user clicks one of the parent menu item that has a sub-menu (clicks on the expand arrow) + I want to show back the hidden element when the users clicks back to the top-level menu.
My menu’s <ul> element get’s a class of slide-menu-is-active-parent when any of the sub-menus is open.

This is a simple version of my row html:

<div class="navigation row">
  <nav>
    <ul id="nav-menu">
      <li>Menu item 1</li>
        <span class="submenu-button">
        <ul class="sub-menu">
          <li>Sub-menu item 1</li>
          <li>Sub-menu item 2</li>
          <li>Sub-menu item 3</li>
        </ul>
      </li>
      <li>Menu item 2</li>
        <span class="submenu-button">
        <ul class="sub-menu">
          <li>Sub-menu item 1</li>
          <li>Sub-menu item 2</li>
          <li>Sub-menu item 3</li>
        </ul>
      </li>
    <ul id="nav-menu">
  <nav>
</div>

<div class="content-row">
  [whatever content...]
</div>

I tried the following script to add a class od menu-open to the some-content element when both conditions are met: the user clicks on the sub-menu button and when the <ul id="nav-menu"> element get’s the slide-menu-is-active-parent class when opened. And with the class added to my content row, I could use simple .content-row.menu-open{display:none} to hide it.

function($) {
    $("#nav-menu .submenu-button").click(function(){
        if ($('#nav-menu').hasClass('slide-menu-is-active-parent')) {
            $('.content-row').addClass('menu-open');
        } else {
            $('.content-row').removeClass('menu-open');
        }
    });  
});

But that doesn’t work. Any tips on where my script is lacking?