Hide block when clicking on another block?

Question

JavaScript

Hello.

The essence of the question is this.

There is a menu. Clicking on a menu item opens a submenu. Clicking on the second menu item opens another submenu. You need to make sure that when you click on the next item, the previous submenu is hidden and a new one is opened.

Help.

Answer 1

Let's say the class is responsible for the open menu show
. Then everything is simple:

$('nav li').click(function() {
        $(this).parents('nav').find('.show').removeClass('show');
        $(this).addClass('show').parents('li').addClass('show');
    });

Answer 2

Like this, didn't check

<ul class="menu">
   <li>
       <a href="#" title="">Ссылка</a>
       <ul>
       <li>
            <a href="#" title="">Ссылка</a>
            <ul>
           <li><a href="#" title="">Ссылка</a></li>
           <li><a href="#" title="">Ссылка</a></li>
        </ul>
       </li>
       <li>
            <a href="#" title="">Ссылка</a>
            <ul>
           <li><a href="#" title="">Ссылка</a></li>
           <li><a href="#" title="">Ссылка</a></li>
        </ul>
        </li>
    </ul>
   </li>
   <li>
      <a href="#" title="">Ссылка</a>
      <ul>
       <li>
            <a href="#" title="">Ссылка</a>
            <ul>
           <li><a href="#" title="">Ссылка</a></li>
           <li><a href="#" title="">Ссылка</a></li>
        </ul>
       </li>
       <li>
            <a href="#" title="">Ссылка</a>
            <ul>
           <li><a href="#" title="">Ссылка</a></li>
           <li><a href="#" title="">Ссылка</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

$(function(){
  $('.menu').find('a').on('click.menu', function(e){
    e.preventDefault();
    var $parent = $(this).parent();
    if ($parent.hasClass('active')) {
      $parent.removeClass('active');
    } else {
      $parent.parent().find('.active').removeClass('active');
      $parent.addClass('active');
    }
  });
});

.menu ul { display: none; }
.menu li.active > ul { display: block; }