时间戳

首页 > 解决方案 > Jquery 切换不会在第二次单击时关闭

javascript - Jquery 切换不会在第二次单击时关闭

问题描述

我有需要在 3 层中显示和隐藏子菜单的大型菜单。

当我使用 jquerytoggle打开和隐藏第二个子菜单（第二列）时，它可以正常工作，但是当我使用相同的代码打开和隐藏第三个子菜单（第三列）时，它会打开但从不隐藏。

有谁知道似乎是什么问题？

我希望有：

单击选项 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();
  });

标签： javascripthtmljquerytoggle

解决方案

我想这就是你所期望的。将您的 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>

推荐阅读