如何替換不推薦使用的.contextjquery？

我正面臨選單系統的問題。我發現使用不推薦使用的 jQuery 背景關系選擇器可能有什么問題，但我不可能理解這段代碼并試圖修復它。

我已經看到這個執行緒在談論它，但由于我不是 jQuery 用戶，我沒有設法使這個答案適應我的情況。任何幫助，將不勝感激！

這是與我的問題相關的 jQuery 代碼。該選單旨在打開/關閉子選單、子子選單、子子子選單等。

$(document).ready(function() {
  $('i.idi').click(function(e) {
    event.stopPropagation();    
    var submenu2 = $(e.target).closest('ul').children('ul li ul.sub-menu');
    var sub = submenu2.context.nextElementSibling;
    var submenu = $(e.target).closest('li').children('ul.sub-menu');
    
    for (let i = 0; i < submenu.length; i  ) {
      if (sub.classList.contains("hidden")) {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }
        sub.classList.remove("hidden");
        sub.classList.add("block");
      } else {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }

        sub.classList.remove("block");
        sub.classList.add("hidden");
      }
    }
  });
});

這是html代碼

    <nav>
        <ul>
              <li>
                  <a href="">
                      <i class="material-icons idi">home</i>
                  </a>
              </li>
                  <li>
                      <a href="" class="mparent">
                          Default
                      </a>
                      <i class="material-icons idi">keyboard_arrow_down</i>
                      <ul class="sub-menu hidden">
                          <li><a href="">
                                  test subcat
                              </a>                      
                          </li>
                      </ul> 
            </li>
        </ul>
    </nav>

 <nav>
    <ul>
       <li>
          <a href="">
              <i class="material-icons idi">home</i>
          </a>
       </li>
       <li>
           <a href="" class="mparent">
              Default
           </a>
           <i class="material-icons idi">keyboard_arrow_down</i>
             <ul class="sub-menu hidden">
                 <li><a href="">
                              test subcat
                      </a>                      
                </li>
            </ul> 
        </li>
    </ul>
</nav>

這是可以使用的css代碼。

.sub-menu.hidden {
    display: none;
}
.sub-menu.block {
    display: block;
}

uj5u.com熱心網友回復：

您可以洗掉紅鯡魚submenu2并使用：

var sub = $(e.target)[0].nextElementSibling;

代碼，提供的 html 和帶有上述調整的 js，使用 jquery 3.3.1（最新的片段）：

$(document).ready(function() {
  $('i.idi').click(function(e) {
    event.stopPropagation();
    var sub = $(e.target)[0].nextElementSibling;
    var submenu = $(e.target).closest('li').children('ul.sub-menu');

    for (let i = 0; i < submenu.length; i  ) {
      if (sub.classList.contains("hidden")) {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }
        sub.classList.remove("hidden");
        sub.classList.add("block");
      } else {
        var submenu1 = document.querySelectorAll('ul li ul');
        for (let i = 0; i < submenu1.length; i  ) {
          if (submenu1[i].classList.contains("hidden")) {} else {
            submenu1[i].classList.remove("block");
            submenu1[i].classList.add("hidden");
          }
        }

        sub.classList.remove("block");
        sub.classList.add("hidden");
      }
    }
  });
});

.sub-menu.hidden {
  display: none;
}

.sub-menu.block {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="">
        <i class="material-icons idi">home</i>
      </a>
    </li>
    <li>
      <a href="" class="mparent">Default</a>
      <i class="material-icons idi">keyboard_arrow_down</i>
      <ul class="sub-menu hidden">
        <li><a href="">test subcat</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

標籤：查询 已弃用

上一篇：獲取JSON請求后沒有任何反應

下一篇：如何將json物件鍵轉換為不同的陣列以去除重復項