提问者:小点点

单击时滑动切换同级,而不使用jQuery


你好,社区。

我有一个超级简单的小脚本,当一个箭头被点击时切换子菜单。

问题是我开发这个的站点不能使用jQuery,而且我对纯JavaScript一无所知。

我正在跟踪大量的答案,并试图将多段代码组合在一起,但这似乎超出了我的知识范围。

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

这个网站是用Angular制作的,所以我怎样才能把它转换成纯JS/Angular呢?

非常感谢您的时间和帮助!


共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");
   }
})

对于“停止”和“滑动切换”,你最好用CSS来模拟。 例如,使用transition和/或@keyframes,并简单地将类移除/添加到元素中。