在沒有 jQuery 的情況下單擊時切換同級

Question

你好，社區。

我有這個超級簡單的小腳本，可以在單擊箭頭時切換子菜單。

問題是我開發的網站不能使用 jQuery，我對純 Javascript 一無所知。

我正在關注很多答案並嘗試將多段代碼放在一起，但這似乎超出了我的知識范圍。

$('.mobile-submenu-toggler').click(function() {
    $(this).toggleClass('rotated');
    $(this).siblings('.submenu').stop().slideToggle(300);
});

該網站是在 Angular 中制作的，所以我怎樣才能將其轉換為純 JS/Angular？

非常感謝您的時間和幫助！

Answer 1

嘗試這個。

const el = document.querySelector(".mobile-submenu-toggle");

el.addEventListener("click", function(){
   el.classList.toggle("rotated");

   for (let sibling of el.parentNode.children) {
    sibling.classList.remove("stop-animation");
    sibling.classList.add("slide-toggle");
   }
})

對於 'stop' 和 'slideToggle' 你最好的選擇是使用 CSS 來模擬這個。 例如，使用 transition 和/或 @keyframes 並簡單地將 class 刪除/添加到元素。