Jquery切換不會在第二次點擊時關閉

我有大型選單，需要在 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();
  });

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

問題是，您在進行切換之前隱藏了您的選項。以此為例：

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

第一次點擊

1.1. 隱藏所有帶有 class name 的 div option。

1.2. 切換子選單-1，即顯示（因為您在步驟 1.1 中隱藏了它。

第二次點擊

2.1. 隱藏所有帶有 class name 的 div option。

2.2. 切換 submenu-1 即顯示，再次因為您在步驟 2.1 中隱藏它。

標籤：javascript html 查询 切换

上一篇：如何計算一個類別和作者的帖子數量

下一篇：當從Laravel控制器呼叫html時，owlcarousal被破壞