时间戳

首页 > 解决方案 > 在没有 jQuery 的情况下单击时的滑动切换兄弟

javascript - 在没有 jQuery 的情况下单击时的滑动切换兄弟

问题描述

你好，社区。

我有这个超级简单的小脚本，可以在单击箭头时切换子菜单。

问题是我开发的网站不能使用 jQuery，而且我对纯 Javascript 一无所知。

我正在关注很多答案并尝试将多段代码放在一起，但这似乎超出了我的知识范围。

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

该网站是用 Angular 制作的，所以我怎样才能将它转换成纯 JS/Angular？

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

标签： javascriptjquery

解决方案

尝试这个。

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 来模拟。例如，使用转换和/或@keyframes 并简单地将类删除/添加到元素。

推荐阅读