Мобильная версияМое решение пока работает, но я не могу динамически получить атрибут отступа моего элемента. . Когда меню закрыто, заполнение должно быть равно 0, а когда оно открыто, заполнение должно динамически наследоваться из класса CSS, передаваемого через TailwindCSS. Однако я не могу найти способ получить это свойство CSS.
Вот что я пробовал:
- Удаление встроенного CSS, который внедряет JavaScript, получение резервного отступа, а затем установка отступа обратно на 0, но это портит анимацию.
- Установка отступа на revert-layer чтобы получить резервное дополнение, но это также прерывает анимацию.
- Создал элемент-клон, чтобы получить оттуда исходное дополнение, но мне не удалось заставить его работать.
Будем очень признательны за любые предложения; на этом этапе я полностью застрял.
В настоящее время единственное работающее решение — жестко запрограммировать отступы в js.
Код: Выделить всё
const categoriesTitle = document.querySelector(".categories_title");
categoriesTitle.addEventListener("click", function () {
let menu = document.querySelector(".toggle_categories_menu");
let menuDisplay = window.getComputedStyle(menu).display;
if (menuDisplay === 'block') {
menu.style.height = `${menu.scrollHeight}px`;
setTimeout(function () {
menu.style.height = '0px';
menu.style.paddingTop = '0px';
menu.style.paddingBottom = '0px';
}, 10);
menu.addEventListener('transitionend', function () {
menu.style.display = 'none';
}, {once: true});
} else {
menu.style.display = 'block';
console.log(window.getComputedStyle(menu).padding);
menu.style.height = '0px';
menu.style.paddingTop = '0px';
menu.style.paddingBottom = '0px';
menu.offsetHeight;
setTimeout(function () {
menu.style.height = `${menu.scrollHeight + 40 + 9}px`;
menu.style.paddingTop = '40px';
menu.style.paddingBottom = '9px';
}, 10);
menu.addEventListener('transitionend', function () {
menu.style.height = 'auto';
}, {once: t r u e } ) ; < b r / > } < b r / > } ) ; < / c o d e > < b r / > < p r e c l a s s = " s n i p p e t - c o d e - h t m l l a n g - h t m l P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; s c r i p t s r c = " h t t p s : / / c d n . t a i l w i n d c s s . c o m " & g t ; & l t ; / s c r i p t & g t ; < b r / > & l t ; d i v c l a s s = " c o l - s p a n - 1 2 l g : c o l - s p a n - 3 l g : p r - 3 " & g t ; < b r / > & l t ; d i v c l a s s = " c a t e g o r i e s _ m e n u m b - [ 3 0 p x ] l g : m b - 0 r e l a t i v e " & g t ; < b r / > & l t ; d i v c l a s s = " c a t e g o r i e s _ t i t l e p x - 4 h - 1 2 l e a d i n g - 9 l g : h - 1 4 l g : l e a d i n g - 1 0 r e l a t i v e c u r s o r - p o i n t e r b g - r e d - 6 0 0 f l e x j u s t i f y - b e t w e e n i t e m s - c e n t e r " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r g a p - 2 " & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " f i l l = " # f f f f f f " c l a s s = " w - 6 h - 6 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 3 6 . 7 5 A . 7 5 . 7 5 0 0 1 3 . 7 5 6 h 1 6 . 5 a . 7 5 . 7 5 0 0 1 0 1 . 5 H 3 . 7 5 A . 7 5 . 7 5 0 0 1 3 6 . 7 5 Z M 3 1 2 a . 7 5 . 7 5 0 0 1 . 7 5 - . 7 5 h 1 6 . 5 a . 7 5 . 7 5 0 0 1 0 1 . 5 H 3 . 7 5 A . 7 5 . 7 5 0 0 1 3 1 2 Z m 0 5 . 2 5 a . 7 5 . 7 5 0 0 1 . 7 5 - . 7 5 h 1 6 . 5 a . 7 5 . 7 5 0 0 1 0 1 . 5 H 3 . 7 5 a . 7 5 . 7 5 0 0 1 - . 7 5 - . 7 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; p c l a s s = " t e x t - x l f o n t - s e m i b o l d t r a c k i n g - t i g h t e r c u r s o r - p o i n t e r t e x t - w h i t e m b - 0 i n l i n e - b l o c k f o n t - s a n s " & g t ; T i t l e & l t ; / p & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " f i l l = " # f f f f f f " c l a s s = " w - 6 h - 6 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 1 2 . 5 3 1 6 . 2 8 a . 7 5 . 7 5 0 0 1 - 1 . 0 6 0 l - 7 . 5 - 7 . 5 a . 7 5 . 7 5 0 0 1 1 . 0 6 - 1 . 0 6 L 1 2 1 4 . 6 9 l 6 . 9 7 - 6 . 9 7 a . 7 5 . 7 5 0 1 1 1 . 0 6 1 . 0 6 l - 7 . 5 7 . 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " t o g g l e _ c a t e g o r i e s _ m e n u h i d d e n m d : b l o c k m a x - h - [ 3 6 0 p x ] m d : m a x - h - n o n e o v e r f l o w - h i d d e n p y - [ 1 5 p x ] p r - [ 1 0 p x ] p l - [ 2 0 p x ] m d : p x - 0 m d : p t - [ 9 0 p x ] m d : p b - [ 9 p x ] b o r d e r - x b o r d e r - b b o r d e r - s o l i d b o r d e r - [ # d d d ] a b s o l u t e w - f u l l t o p - f u l l z - 1 0 b g - [ # f f f ] t r a n s i t i o n - h e i g h t e a s e - i n - o u t d u r a t i o n - 1 0 0 0 " & g t ; < b r / > & l t ; u l & g t ; < b r / > & l t ; l i c l a s s = " m e n u _ i t e m _ c h i l d r e n " d a t a - p r o d u c t = " 7 4 5 " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - b e t w e e n h o v e r : b g - [ # F 0 F 0 F 0 ] g r o u p " & g t ; < b r / > & l t ; a c l a s s = " l e a d i n g - 9 p r - [ 1 5 p x ] p l - [ 2 0 p x ] t e x t - s m t e x t - [ # 3 3 3 ] c a p i t a l i z e f o n t - n o r m a l b l o c k c u r s o r - p o i n t e r g r o u p - h o v e r : f o n t - b o l d f o n t - s p i n n a k e r " h r e f = " a l f a - r o m e o " & g t ; < b r / > L i s t i t e m 1 < b r / > & l t ; i c l a s s = " f a f a - a n g l e - r i g h t f l o a t - r i g h t ! t e x t - s m ! l e a d i n g - 9 " & g t ; & l t ; / i & g t ; < b r / > & l t ; / a & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " d r o p d o w n _ b u t t o n p r - [ 1 5 p x ] " & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " c l a s s = " w - 4 h - 4 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 1 2 . 5 3 1 6 . 2 8 a . 7 5 . 7 5 0 0 1 - 1 . 0 6 0 l - 7 . 5 - 7 . 5 a . 7 5 . 7 5 0 0 1 1 . 0 6 - 1 . 0 6 L 1 2 1 4 . 6 9 l 6 . 9 7 - 6 . 9 7 a . 7 5 . 7 5 0 1 1 1 . 0 6 1 . 0 6 l - 7 . 5 7 . 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " m e n u _ i t e m _ c h i l d r e n " d a t a - p r o d u c t = " 3 2 " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - b e t w e e n h o v e r : b g - [ # F 0 F 0 F 0 ] g r o u p " & g t ; < b r / > & l t ; a c l a s s = " l e a d i n g - 9 p r - [ 1 5 p x ] p l - [ 2 0 p x ] t e x t - s m t e x t - [ # 3 3 3 ] c a p i t a l i z e f o n t - n o r m a l b l o c k c u r s o r - p o i n t e r g r o u p - h o v e r : f o n t - b o l d f o n t - s p i n n a k e r " h r e f = " a u d i " & g t ; < b r / > L i s t i t e m 2 < b r / > & l t ; i c l a s s = " f a f a - a n g l e - r i g h t f l o a t - r i g h t ! t e x t - s m ! l e a d i n g - 9 " & g t ; & l t ; / i & g t ; < b r / > & l t ; / a & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " d r o p d o w n _ b u t t o n p r - [ 1 5 p x ] " & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " c l a s s = " w - 4 h - 4 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 1 2 . 5 3 1 6 . 2 8 a . 7 5 . 7 5 0 0 1 - 1 . 0 6 0 l - 7 . 5 - 7 . 5 a . 7 5 . 7 5 0 0 1 1 . 0 6 - 1 . 0 6 L 1 2 1 4 . 6 9 l 6 . 9 7 - 6 . 9 7 a . 7 5 . 7 5 0 1 1 1 . 0 6 1 . 0 6 l - 7 . 5 7 . 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " m e n u _ i t e m _ c h i l d r e n " d a t a - p r o d u c t = " 1 5 9 8 " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - b e t w e e n h o v e r : b g - [ # F 0 F 0 F 0 ] g r o u p " & g t ; < b r / > & l t ; a c l a s s = " l e a d i n g - 9 p r - [ 1 5 p x ] p l - [ 2 0 p x ] t e x t - s m t e x t - [ # 3 3 3 ] c a p i t a l i z e f o n t - n o r m a l b l o c k c u r s o r - p o i n t e r g r o u p - h o v e r : f o n t - b o l d f o n t - s p i n n a k e r " h r e f = " b a i c " & g t ; < b r / > L i s t i t e m 3 < b r / > & l t ; i c l a s s = " f a f a - a n g l e - r i g h t f l o a t - r i g h t ! t e x t - s m ! l e a d i n g - 9 " & g t ; & l t ; / i & g t ; < b r / > & l t ; / a & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " d r o p d o w n _ b u t t o n p r - [ 1 5 p x ] " & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " c l a s s = " w - 4 h - 4 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 1 2 . 5 3 1 6 . 2 8 a . 7 5 . 7 5 0 0 1 - 1 . 0 6 0 l - 7 . 5 - 7 . 5 a . 7 5 . 7 5 0 0 1 1 . 0 6 - 1 . 0 6 L 1 2 1 4 . 6 9 l 6 . 9 7 - 6 . 9 7 a . 7 5 . 7 5 0 1 1 1 . 0 6 1 . 0 6 l - 7 . 5 7 . 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " m e n u _ i t e m _ c h i l d r e n " d a t a - p r o d u c t = " 5 0 1 " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - b e t w e e n h o v e r : b g - [ # F 0 F 0 F 0 ] g r o u p " & g t ; < b r / > & l t ; a c l a s s = " l e a d i n g - 9 p r - [ 1 5 p x ] p l - [ 2 0 p x ] t e x t - s m t e x t - [ # 3 3 3 ] c a p i t a l i z e f o n t - n o r m a l b l o c k c u r s o r - p o i n t e r g r o u p - h o v e r : f o n t - b o l d f o n t - s p i n n a k e r " h r e f = " b m w " & g t ; < b r / > L i s t i t e m 4 < b r / > & l t ; i c l a s s = " f a f a - a n g l e - r i g h t f l o a t - r i g h t ! t e x t - s m ! l e a d i n g - 9 " & g t ; & l t ; / i & g t ; < b r / > & l t ; / a & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " d r o p d o w n _ b u t t o n p r - [ 1 5 p x ] " & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " c l a s s = " w - 4 h - 4 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 1 2 . 5 3 1 6 . 2 8 a . 7 5 . 7 5 0 0 1 - 1 . 0 6 0 l - 7 . 5 - 7 . 5 a . 7 5 . 7 5 0 0 1 1 . 0 6 - 1 . 0 6 L 1 2 1 4 . 6 9 l 6 . 9 7 - 6 . 9 7 a . 7 5 . 7 5 0 1 1 1 . 0 6 1 . 0 6 l - 7 . 5 7 . 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " m e n u _ i t e m _ c h i l d r e n " d a t a - p r o d u c t = " 3 7 " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - b e t w e e n h o v e r : b g - [ # F 0 F 0 F 0 ] g r o u p " & g t ; < b r / > & l t ; a c l a s s = " l e a d i n g - 9 p r - [ 1 5 p x ] p l - [ 2 0 p x ] t e x t - s m t e x t - [ # 3 3 3 ] c a p i t a l i z e f o n t - n o r m a l b l o c k c u r s o r - p o i n t e r g r o u p - h o v e r : f o n t - b o l d f o n t - s p i n n a k e r " h r e f = " c h e v r o l e t " & g t ; < b r / > L i s t i t e m 5 & l t ; i c l a s s = " f a f a - a n g l e - r i g h t f l o a t - r i g h t ! t e x t - s m ! l e a d i n g - 9 " & g t ; & l t ; / i & g t ; < b r / > & l t ; / a & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " d r o p d o w n _ b u t t o n p r - [ 1 5 p x ] " & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " c l a s s = " w - 4 h - 4 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 1 2 . 5 3 1 6 . 2 8 a . 7 5 . 7 5 0 0 1 - 1 . 0 6 0 l - 7 . 5 - 7 . 5 a . 7 5 . 7 5 0 0 1 1 . 0 6 - 1 . 0 6 L 1 2 1 4 . 6 9 l 6 . 9 7 - 6 . 9 7 a . 7 5 . 7 5 0 1 1 1 . 0 6 1 . 0 6 l - 7 . 5 7 . 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " m e n u _ i t e m _ c h i l d r e n " d a t a - p r o d u c t = " 4 5 " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - b e t w e e n h o v e r : b g - [ # F 0 F 0 F 0 ] g r o u p " & g t ; < b r / > & l t ; a c l a s s = " l e a d i n g - 9 p r - [ 1 5 p x ] p l - [ 2 0 p x ] t e x t - s m t e x t - [ # 3 3 3 ] c a p i t a l i z e f o n t - n o r m a l b l o c k c u r s o r - p o i n t e r g r o u p - h o v e r : f o n t - b o l d f o n t - s p i n n a k e r " h r e f = " c i t r o e n " & g t ; < b r / > L i s t i t e m 6 < b r / > & l t ; i c l a s s = " f a f a - a n g l e - r i g h t f l o a t - r i g h t ! t e x t - s m ! l e a d i n g - 9 " & g t ; & l t ; / i & g t ; < b r / > & l t ; / a & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " d r o p d o w n _ b u t t o n p r - [ 1 5 p x ] " & g t ; < b r / > & l t ; s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " v i e w B o x = " 0 0 2 4 2 4 " c l a s s = " w - 4 h - 4 i n l i n e - b l o c k " & g t ; < b r / > & l t ; p a t h f i l l - r u l e = " e v e n o d d " d = " M 1 2 . 5 3 1 6 . 2 8 a . 7 5 . 7 5 0 0 1 - 1 . 0 6 0 l - 7 . 5 - 7 . 5 a . 7 5 . 7 5 0 0 1 1 . 0 6 - 1 . 0 6 L 1 2 1 4 . 6 9 l 6 . 9 7 - 6 . 9 7 a . 7 5 . 7 5 0 1 1 1 . 0 6 1 . 0 6 l - 7 . 5 7 . 5 Z " c l i p - r u l e = " e v e n o d d " & g t ; & l t ; / p a t h & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " m e n u _ i t e m _ c h i l d r e n " d a t a - p r o d u c t = " 1 4 5 1 " & g t ; < b r / > & l t ; d i v c l a s s = " f l e x j u s t i f y - b e t w e e n h o v e r : b g - [ # F 0 F 0 F 0 ] g r o u p " & g t ; < b r / > & l t ; a c l a s s = " l e a d i n g - 9 p r - [ 1 5 p x ] p l - [ 2 0 p x ] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="cupra">
List item 7
[i][/i]
[*]
[url=dacia]
List item 8
[i][/i]
[/url]
[*]
[url=daewoo]
List item 9
[i][/i]
[/url]
[*]
[url=daihatsu]
List item 10
[i][/i]
[/url]
[*]
[i][/i]
Mai multe >>>
Подробнее здесь: https://stackoverflow.com/questions/791 ... javascript
