I have mega menu who need to show and hide submenus in 3 layers.

When i use jquery toggle it work fine for opening and hiding the second submenu (second column), but when i use the same code for opening and hiding the third submenu (third column) it open but never hide.

Does anyone know what seems to be the problem?

I want to have:

click option 1 => show option 1.1

click option 1.1 => show option 1.1.1

second click option 1 => hide option 1.1 and option 1.1.1

second click option 1.1 => hide option 1.1.1

html code:

<div>
<!-- FIRST COLUMN -->
  <div>
    <a class="first-link" href="#">option 1</a>
    <a class="second-link" href="#">option 2</a>
  </div>
<!-- SECOND COLUMN -->
  <div class="submenu-1 option" style="display:none;">
    <div>
      <a class="submenu-first-element" href="#">option 1.1</a>
    </div>
    <div>
      <a class="submenu-second-element" href="#">option 1.2</a>
    </div>
  </div>

  <div class="submenu-2 option" style="display:none;">
    <div>
      <a class="submenu-2-first-element">option 1.1</a>
    </div>
  </div>
<!-- THIRD COLUMN -->
  <div class="first-preview hide-div" style="display:none;">
    <a>option 1.1.1</a>
  </div>

  <div class="second-element hide-div" style="display:none;">
    <a>option 1.1.2</a>
  </div>

  <div class="third-element hide-div" style="display:none;">
    <a>option 1.2.1</a>
  </div>
</div>

jquery code:

//second column
  $('.first-link').on('click', () => {
    $('.option').hide();
    $('.submenu-1').toggle();
  });

  $('.second-link').on('click', () => {
    $('.option').hide();
    $('.submenu-2').toggle();
  });

//third column
  $('.submenu-first-element').on('click', () => {
    $('.hide-div').hide();
    $('.first-preview').toggle();    
  });

  $('.submenu-first-element').on('click', () => {
    $('.hide-div').hide();
    $('.second-element').toggle();
  });

  $('.submenu-second-element').on('click', () => {
    $('.hide-div').hide();
    $('.third-element').toggle();
  });

CodePudding user response：

I guess this is what you expected. Move your divs closer to the parent and with a one-click event you can achieve both.

//second column
  $('.first-link').on('click', () => {
   //$('.option').hide();
   $(".submenu-2").hide();
    $('.submenu-1').toggle();
  });

  $('.second-link').on('click', () => {
    //$('.option').hide();
    $(".submenu-1").hide();
    $('.submenu-2').toggle();
  });

//third column
  $('.submenu-first-element').on('click', () => {
    //$('.hide-div').hide();
    $('.first-preview').toggle(); 
    $('.second-element').toggle();   
  });

  //on single click it can be done, no need to repeat the function
  //$('.submenu-first-element').on('click', () => {
  //  $('.hide-div').hide();
  //});

  $('.submenu-second-element').on('click', () => {
   //$('.hide-div').hide();
    $('.third-element').toggle();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<!-- FIRST COLUMN -->
  <div>
    <a class="first-link" href="#">option 1</a>
    <a class="second-link" href="#">option 2</a>
  </div>
<!-- SECOND COLUMN -->
  <div class="submenu-1 option" style="display:none;">
    <div>
      <a class="submenu-first-element" href="#">option 1.1</a>
    </div>
    
      <div class="first-preview hide-div" style="display:none;">
    <a>option 1.1.1</a>
  </div>

  <div class="second-element hide-div" style="display:none;">
    <a>option 1.1.2</a>
  </div>
    
    <div>
      <a class="submenu-second-element" href="#">option 1.2</a>
    </div>
    
    <div class="third-element hide-div" style="display:none;">
    <a>option 1.2.1</a>
  </div>
  </div>

  <div class="submenu-2 option" style="display:none;">
    <div>
      <a class="submenu-2-first-element">option 1.2</a>
    </div>
  </div>
<!-- THIRD COLUMN -->

  
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The problem is, you are hiding your options before doing the toggle. Take this for an example:

$('.first-link').on('click', () => {
    $('.option').hide();
    $('.submenu-1').toggle();
  });

First Click

1.1. Hide all divs with class name option.

1.2. Toggle submenu-1, i.e. show (because you hide it in step 1.1.

Second Click

2.1. Hide all divs with class name option.

2.2. Toggle submenu-1 i.e. show, again because you hide it in step 2.1.