UL LI menus handling

Question

I would like to know how to handle this menu:

<ul class= "nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul class="submenu">
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>

What I want to do is that when the user clicks on the li of the nav class I want to check whether the the clicked li has a submenu or not an dapply some css class.

Can someone assist me in that direction using jquery?

Answer 1

Hide items with CSS:

.nav li > ul {
  display: none;
}

And JS:

$('.nav > li').on('click', function(){
  $('.nav li ul').hide();
  $(this).find('ul').show();
});