javascript - return event on second toggle - Stack Overflow

admin管理员组

文章数量:1287963

I have a burgermenu with an overlay using toggle to activate the overlay (upper right):

/

I used JS to rotate the burgermenu on toggle... the overlay/menu slides down .but i cant get it it to rotate back to the original position on a second toggle as the overlay/menu clears

my script (what I was trying is in bold):

const bento_box_wrapper = document.querySelector('.bento_box_wrapper');
const bento_box = document.querySelectorAll('.bento_box');
bento_box_wrapper.onclick = function() {
const overlayWrapper = document.querySelector('.overlayWrapper');
overlayWrapper.classList.toggle('overlayWrapperSlideDown');
$('.bento_box_wrapper').addClass('blur');
bento_box_wrapper.style.transform = 'rotate(315deg)';
$('div#toggle').addClass('blur');
const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');
**bento_box_wrapper.classList.toggle = 'rotate(45 deg)';**
}

I have a burgermenu with an overlay using toggle to activate the overlay (upper right):

https://pitchlab/

I used JS to rotate the burgermenu on toggle... the overlay/menu slides down .but i cant get it it to rotate back to the original position on a second toggle as the overlay/menu clears

my script (what I was trying is in bold):

const bento_box_wrapper = document.querySelector('.bento_box_wrapper');
const bento_box = document.querySelectorAll('.bento_box');
bento_box_wrapper.onclick = function() {
const overlayWrapper = document.querySelector('.overlayWrapper');
overlayWrapper.classList.toggle('overlayWrapperSlideDown');
$('.bento_box_wrapper').addClass('blur');
bento_box_wrapper.style.transform = 'rotate(315deg)';
$('div#toggle').addClass('blur');
const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');
**bento_box_wrapper.classList.toggle = 'rotate(45 deg)';**
}

• javascript
• html
• toggle

Share Improve this question Follow asked Feb 23 at 4:03 REELHEROREELHERO 3711 silver badge1010 bronze badges 3

• 2 You might find reading the site help section useful when it comes to asking a good question. To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a minimal reproducible example. Here's a question checklist you might find useful... – Mister Jojo Commented Feb 23 at 5:36
• 1 It would be better to create a class and toggle the class on click as you are doing for .mainNavLinksWrapperSlideUp; If you want different rotations on click you can create 2 differents classes and then add or remove them (if element contains that class on click) – Mehdi Commented Feb 23 at 11:14
• copy that. I thought I was doing that above by showing the code I was using. I guess I shouldve created a snippet. apologies. – REELHERO Commented Feb 23 at 16:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can set transform attribute of the element to rotate(0). Something like below should handle your case:

var angle = bento_box_wrapper.style.transform !== 'rotate(45deg)' ? 45 : 0;
bento_box_wrapper.style.transform = 'rotate(' + angle + 'deg)';

本文标签： javascriptreturn event on second toggleStack Overflow