[英]slideToggle sibling on click without jQuery
Hello, community.你好,社区。
I have this little super easy script to toggle a submenu when an arrow is clicked.我有这个超级简单的小脚本,可以在单击箭头时切换子菜单。
The problem is the site I develop this to can't use jQuery, and I know nothing of pure Javascript.问题是我开发的网站不能使用 jQuery,我对纯 Javascript 一无所知。
I'm following a lot of answers and trying to put together multiple pieces of code but this seems just way over my knowledge.我正在关注很多答案并尝试将多段代码放在一起,但这似乎超出了我的知识范围。
$('.mobile-submenu-toggler').click(function() {
$(this).toggleClass('rotated');
$(this).siblings('.submenu').stop().slideToggle(300);
});
The site is made in Angular, so that's so how can I convert this into pure JS/Angular?该网站是在 Angular 中制作的,所以我怎样才能将其转换为纯 JS/Angular?
Thanks a lot for your time and help!非常感谢您的时间和帮助!
Try this.尝试这个。
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");
}
})
For 'stop' and 'slideToggle' your best bet is to use CSS to simulate this.对于 'stop' 和 'slideToggle' 你最好的选择是使用 CSS 来模拟这个。 For example, using transition and/or @keyframes and simply remove/add the class to the element(s).
例如,使用 transition 和/或 @keyframes 并简单地将 class 删除/添加到元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.