Add class to element when clicked elsewhere condition on class presence-CodePudding

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 >
  <nav>
    <ul id="nav-menu">
      <li>Menu item 1</li>
        <span >
        <ul >
          <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 >
        <ul >
          <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 >
  [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?

CodePudding user response：

To be honest, your code works: just add the slide-menu-is-active-parent class to the #nav-menu, and the content-row shows up on click. Still, I would do this differently - even if using jQuery. Here's a simplistic solution:

jQuery(document).ready(function($) {
  // this click handler opens the sub-menu
  $(".menu-item").on('click', function() {
    $(this).find(".sub-menu").toggle()
  })

  // this click handler toggles the content-row
  $(".sub-menu > li").on('click', function(e) {
    // stopPropagation prevents the click event
    // to bubble up to the menu-item parent
    e.stopPropagation()
    $(".content-row").toggle()
  })
})

.d-none {
  display: none;
}

.menu-item,
.sub-menu>li {
  cursor: pointer;
}

.content-row {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <nav>
    <ul id="nav-menu">
      <li >Menu item 1
        <ul >
          <li>Sub-menu item 1</li>
          <li>Sub-menu item 2</li>
          <li>Sub-menu item 3</li>
        </ul>
      </li>
      <li >Menu item 2
        <ul >
          <li>Sub-menu item 1</li>
          <li>Sub-menu item 2</li>
          <li>Sub-menu item 3</li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<div >
  [whatever content...]
</div>

CodePudding user response：

You need to use $(this) to refer to the element you clicked.

You also need to find parent with class, so you can use parents() with the name of your class.

NOTE : if i solved your problem, please next time do effort to make your question more clear, it will be better for everyone :)

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

.content-row { display:none }
.menu-open { display:block }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <nav>
    <ul id="nav-menu" >
      <li>Menu item 1</li>
      <span >Button</span>
      <ul >
        <li>Sub-menu item 1</li>
        <li>Sub-menu item 2</li>
        <li>Sub-menu item 3</li>
      </ul>
      <li>Menu item 2</li>
      <span >Button</span>
      <ul >
        <li>Sub-menu item 1</li>
        <li>Sub-menu item 2</li>
        <li>Sub-menu item 3</li>
      </ul>
    </ul>
  </nav>
</div>

<div >
  [whatever content...]
</div>