[英]slideToggle sibling on click without jQuery
你好,社区。
我有这个超级简单的小脚本,可以在单击箭头时切换子菜单。
问题是我开发的网站不能使用 jQuery,我对纯 Javascript 一无所知。
我正在关注很多答案并尝试将多段代码放在一起,但这似乎超出了我的知识范围。
$('.mobile-submenu-toggler').click(function() {
$(this).toggleClass('rotated');
$(this).siblings('.submenu').stop().slideToggle(300);
});
该网站是在 Angular 中制作的,所以我怎样才能将其转换为纯 JS/Angular?
非常感谢您的时间和帮助!
尝试这个。
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 删除/添加到元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.