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

第一次点击

1.1。隐藏所有名称为 class option.

的 div

1.2。切换子菜单-1，即显示（因为你在步骤1.1中隐藏了它。

第二次点击

2.1。隐藏所有名称为 class option.

的 div

2.2。再次切换 submenu-1 即显示，因为您在步骤 2.1 中隐藏了它。

Jquery 第二次点击切换不关闭

Jquery toggle not closing on second click

html

javascript

jquery

toggle