Jquery切换不关闭第二次单击

Question

我有超级菜单谁需要显示和隐藏3层子菜单。

当我使用jquery toggle时，它可以很好地打开和隐藏第二个子菜单(第二列)，但是当我使用相同的代码打开和隐藏第三个子菜单(第三列)时，它就打开了，但从不隐藏。

有人知道问题出在哪里吗？

我想要：

单击选项1 =>显示选项1.1

单击选项1.1 =>显示选项1.1.1

第二次单击选项1 =>隐藏选项1.1和选项1.1.1

第二次单击选项1.1 =>隐藏选项1.1.1

html代码：

<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代码：

//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();
  });

Answer 1

我想这正是你所期望的。将您的div移动到更接近父服务器的位置，通过单击事件，您可以同时实现这两个目标。

​

//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>

​

Answer 2

问题是，在切换之前，您正在隐藏您的选项。举个例子：

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

First Click

1.1。隐藏类名为option的所有div。

1.2。切换子菜单-1，即显示(因为您隐藏在步骤1.1。

第二次单击

2.1。隐藏类名为option的所有div。

2.2。切换子菜单-1，即显示，再次因为你隐藏在步骤2.1。