Всплывающее меню не отображается при нажатии

Всплывающее меню не отображается при нажатии ⇐ Jquery

1 сообщение • Страница 1 из 1

Anonymous

Всплывающее меню не отображается при нажатии

Цитата

Сообщение Anonymous » 31 окт 2023, 05:56

На моем веб-сайте есть всплывающее меню, но в настоящее время оно не работает должным образом.

Вот моя демо: http://jsfiddle.net/chx1y5w6/

Может кто-нибудь объяснить, почему, когда я нажимаю кнопку меню гамбургера, меню не появляется?

(function(window){ 'используйте строгий'; функция classReg (имя класса) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } вар hasClass, addClass, RemoveClass; if ('classList' в document.documentElement) { hasClass = функция (элемент, c) { вернуть elem.classList.contains(c); }; addClass = функция (элемент, с) { элемент.classList.add(c); }; удалитьКласс = функция (элемент, с) { элемент.classList.remove(c); }; } еще { hasClass = функция (элемент, c) { вернуть classReg( c ).test(elem.className); }; addClass = функция (элемент, с) { если (!hasClass(elem, c)) { elem.className = elem.className + ' ' + c; } }; удалитьКласс = функция (элемент, с) { elem.className = elem.className.replace(classReg(c), ' ' ); }; } функция toggleClass(elem, c) { вар fn = hasClass(elem, c)? удалитьКласс: добавитьКласс; fn(элемент, с); } вар класс = { // полные имена имеетКласс: имеетКласс, добавитьКласс: добавитьКласс, удалитьКласс: удалитьКласс, переключателькласс: переключателькласс, // короткие имена имеет: имееткласс, добавить: добавитьКласс, удалить: удалитькласс, переключить: toggleClass }; // транспорт if ( typeof define === 'function' && define.amd ) { // АМД определить (классный); } еще { // глобальный браузер window.classie = классик; } })( окно ); /* Переключение меню */ (функция () { 'используйте строгий'; var toggleX = document.querySelector('.toggle-x'); вар classActive = 'активный'; varinnerDiv = document.createElement('div'); innerDiv.className = 'переключить-значок-строку'; toggleX.appendChild(innerDiv); toggleX.addEventListener('click', onClickHandler); функция onClickHandler (evt) { (this.classList.contains(classActive) === true)? this.classList.remove(classActive):this.classList.add(classActive); if($('body').hasClass('шоу-меню')){ переключитьМеню(); } $(документ).keyup(функция(e) { if (e.keyCode == 27) { // escape-клавиша сопоставляется с кодом `27` переключитьМеню(); } }); вар bodyEl = document.body, контент = document.querySelector('.content-wrap'), openbtn = document.getElementsByClassName('toggle-x'), closebtn = document.getElementsByClassName('toggle-x'), isOpen = ложь; функция инициализации() { initEvents(); } функция initEvents() { openbtn.addEventListener('клик', toggleMenu); если (близко) { closebtn.addEventListener('клик', toggleMenu); } // закрываем элемент меню, если цель не является элементом меню или одним из его потомков.. content.addEventListener('click', function(ev) { вар цель = ev.target; если( isOpen && цель !== openbtn ) { переключитьМеню(); } }); } функция toggleMenu() { если ( isOpen ) { classie.remove(bodyEl, 'показать-меню'); } еще { classie.add(bodyEl, 'показать-меню'); } isOpen = !isOpen; } в этом(); } })(); /*! нормализовать.css v3.0.2 | Лицензия MIT | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}статья, в стороне ,подробности,figcaption,рисунок,нижний колонтитул,заголовок,hgroup,главное,меню,навигация,раздел,сводка{дисплей:блок}аудио,холст,прогресс,видео{дисплей:inline-block;вертикальное выравнивание:базовая линия}аудио:нет ([элементы управления]){display:none;height:0}[скрытый],шаблон{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border -bottom:1px пунктирный}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25 em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd ,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select {text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[ отключено],html input[отключено]{курсор:default}кнопка::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input [type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[ type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type=" search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px Solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}легенда{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td ,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.wrapper{text-align:center;background:rgba(0,0, 0,0);padding:0 0;margin:0 0 0 0;размер шрифта:0} .toggle {позиция: относительная; переполнение: скрыто; отображение: встроенный блок; поле: 0; отступ: 0; ширина: 48 пикселей; высота: 48 пикселей; радиус границы: 50%; курсор: указатель; -webkit-tap-highlight -color:rgba(0,0,0,0);transition:nd 0,3s}.toggle:focus{outline:none}.toggle .toggle-icon-line{position:absolute;top:23px;left:12px; right:12px;height:2px;background:white}.toggle .toggle-icon-line::before,.toggle .toggle-icon-line::after{content:'';position:absolute;display:block;height :2px;background-color:white;left:0;width:100%}.toggle .toggle-icon-line::before{top:-9px}.toggle .toggle-icon-line::after{bottom:- 9px}.toggle-x{background-color:#00b4ff}.toggle-x:hover{background-color:#007eb2}.toggle-x .toggle-icon-line{переход:фон 0 с линейный 0,3 с}.toggle- x .toggle-icon-line::before{transition-property:top,-webkit-transform;transition-property:top,transform}.toggle-x .toggle-icon-line::after{transition-property:bottom, -webkit-transform;transition-property:bottom,transform}.toggle-x .toggle-icon-line::before,.toggle-x .toggle-icon-line::after{transition-duration:0.3s,0.3s ;transition-delay:0.3s,0s}.toggle-x.active{background-color:#007eb2}.toggle-x.active .toggle-icon-line{background:none}.toggle-x.active .toggle- icon-line::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.toggle-x.active .toggle-icon-line ::after{дно:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.toggle-x.active .toggle-icon-line ::before,.toggle-x.active .toggle-icon-line::after{transition-delay:0s,0.3s} .переключать { положение: относительное; переполнение: скрыто; отображение: встроенный блок; маржа: 0; заполнение: 0; ширина: 48 пикселей; высота: 48 пикселей; граница-радиус: 50%; курсор: указатель; -webkit-tap-highlight-color:rgba(0,0,0,0); переход: фон 0,3 с; } .toggle:фокус { контур: нет; } .toggle .toggle-icon-line { позиция: абсолютная; верх: (48/2) – (48/2); слева: 12 пикселей; справа: 14 пикселей; высота: 2 пикселя; фон: RGB(255, 255, 255); } .toggle .toggle-icon-line::before, .toggle .toggle-icon-line::after { содержание: ''; позиция: абсолютная; дисплей: блок; высота: 2 пикселя; цвет фона: RGB(255, 255, 255); слева: 0; ширина: 100%; } .toggle .toggle-icon-line::before { верх: -((48/2) - (48/2) - 14); } .toggle .toggle-icon-line::after { низ: -((48/2) - (48/2) - 14); } .toggle-x { цвет фона: RGB (0, 180, 255); } .toggle-x:hover { фоновый цвет: RGB(0, 126, 178); } .toggle-x .toggle-icon-line { переход: фон 0 с, линейный 0,3 с; } .toggle-x .toggle-icon-line::before { свойство перехода: верх, преобразование; } .toggle-x .toggle-icon-line::after { свойство перехода: дно, преобразование; } .toggle-x .toggle-icon-line::before, .toggle-x .toggle-icon-line::after { продолжительность перехода: 0,3 с, 0,3 с; задержка перехода: 0,3 с, 0 с; } .toggle-x.active { цвет фона: rgb(0, 126, 178); } .toggle-x.active .toggle-icon-line { фон: нет; } .toggle-x.active .toggle-icon-line::before { верх: 0; преобразование: поворот (45 градусов); } .toggle-x.active .toggle-icon-line::after { внизу: 0; преобразование: поворот (-45 градусов); } .toggle-x.active .toggle-icon-line::before, .toggle-x.active .toggle-icon-line::after { задержка перехода: 0 с, 0,3 с; } .menu-wrap { позиция: абсолютная; z-индекс: 1001; ширина: 300 пикселей; высота: 100%; отступ: 2,5em 1,5em 0; размер шрифта: 1,15em; -webkit-transform: Translate3d(-320px,0,0); преобразование: Translate3d (-320 пикселей, 0,0); -webkit-transition: -webkit-transform 0,4 с; переход: преобразование 0,4 с; -webkit-переход-тайминг-функция: кубический-безье (0.7,0,0.3,1); функция времени перехода: кубическое Безье (0,7,0,0,3,1); } /* Показанное меню */ .show-menu .menu-wrap { -webkit-transform: Translate3d (0,0,0); преобразование: Translate3d (0,0,0); -webkit-transition: -webkit-transform 0,8 с; переход: преобразование 0,8 с; -webkit-переход-тайминг-функция: кубический-безье (0.7,0,0.3,1); функция времени перехода: кубическое Безье (0,7,0,0,3,1); положение: фиксированное; } .show-menu .icon-list, .show-menu .icon-list а { } .show-menu .icon-list а { -webkit-transition-duration: 0,9 с; продолжительность перехода: 0,9 с; } .show-menu .content::before { непрозрачность: 1; -webkit-transition: непрозрачность 0,8 с; переход: непрозрачность 0,8 с; -webkit-переход-тайминг-функция: кубический-безье (0.7,0,0.3,1); функция времени перехода: кубическое Безье (0,7,0,0,3,1); -webkit-transform: Translate3d (0,0,0); преобразование: Translate3d (0,0,0);

Привет!

Добро пожаловать

1698720963

Anonymous


На моем веб-сайте есть всплывающее меню, но в настоящее время оно не работает должным образом.
 
Вот моя демо: http://jsfiddle.net/chx1y5w6/
 
Может кто-нибудь объяснить, почему, когда я нажимаю кнопку меню гамбургера, меню не появляется?
 
  (function(window){ 'используйте строгий'; функция classReg (имя класса) {   return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } вар hasClass, addClass, RemoveClass; if ('classList' в document.documentElement) {   hasClass = функция (элемент, c) {     вернуть elem.classList.contains(c);   };   addClass = функция (элемент, с) {     элемент.classList.add(c);   };   удалитьКласс = функция (элемент, с) {     элемент.classList.remove(c);   }; } еще {   hasClass = функция (элемент, c) {     вернуть classReg( c ).test(elem.className);   };   addClass = функция (элемент, с) {     если (!hasClass(elem, c)) {       elem.className = elem.className + ' ' + c;     }   };   удалитьКласс = функция (элемент, с) {     elem.className = elem.className.replace(classReg(c), ' ' );   }; } функция toggleClass(elem, c) {   вар fn = hasClass(elem, c)? удалитьКласс: добавитьКласс;   fn(элемент, с); } вар класс = {   // полные имена   имеетКласс: имеетКласс,   добавитьКласс: добавитьКласс,   удалитьКласс: удалитьКласс,   переключателькласс: переключателькласс,   // короткие имена   имеет: имееткласс,   добавить: добавитьКласс,   удалить: удалитькласс,   переключить: toggleClass }; // транспорт if ( typeof define === 'function' && define.amd ) {   // АМД   определить (классный); } еще {   // глобальный браузер   window.classie = классик; } })( окно ); /* Переключение меню */ (функция () {   'используйте строгий';   var toggleX = document.querySelector('.toggle-x');   вар classActive = 'активный';   varinnerDiv = document.createElement('div');   innerDiv.className = 'переключить-значок-строку';   toggleX.appendChild(innerDiv);   toggleX.addEventListener('click', onClickHandler);   функция onClickHandler (evt) {          (this.classList.contains(classActive) === true)? this.classList.remove(classActive):this.classList.add(classActive);     if($('body').hasClass('шоу-меню')){         переключитьМеню();     }     $(документ).keyup(функция(e) { if (e.keyCode == 27) { // escape-клавиша сопоставляется с кодом `27` переключитьМеню(); } }); вар bodyEl = document.body, контент = document.querySelector('.content-wrap'), openbtn = document.getElementsByClassName('toggle-x'), closebtn = document.getElementsByClassName('toggle-x'), isOpen = ложь; функция инициализации() { initEvents(); } функция initEvents() { openbtn.addEventListener('клик', toggleMenu); если (близко) { closebtn.addEventListener('клик', toggleMenu); } // закрываем элемент меню, если цель не является элементом меню или одним из его потомков.. content.addEventListener('click', function(ev) { вар цель = ev.target; если( isOpen && цель !== openbtn ) { переключитьМеню(); } }); } функция toggleMenu() { если ( isOpen ) { classie.remove(bodyEl, 'показать-меню'); } еще { classie.add(bodyEl, 'показать-меню'); } isOpen = !isOpen; } в этом();   } })(); /*! нормализовать.css v3.0.2 | Лицензия MIT | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}статья, в стороне ,подробности,figcaption,рисунок,нижний колонтитул,заголовок,hgroup,главное,меню,навигация,раздел,сводка{дисплей:блок}аудио,холст,прогресс,видео{дисплей:inline-block;вертикальное выравнивание:базовая линия}аудио:нет ([элементы управления]){display:none;height:0}[скрытый],шаблон{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border -bottom:1px пунктирный}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25 em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd ,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select {text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[ отключено],html input[отключено]{курсор:default}кнопка::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input [type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[ type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type=" search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px Solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}легенда{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td ,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.wrapper{text-align:center;background:rgba(0,0, 0,0);padding:0 0;margin:0 0 0 0;размер шрифта:0} .toggle {позиция: относительная; переполнение: скрыто; отображение: встроенный блок; поле: 0; отступ: 0; ширина: 48 пикселей; высота: 48 пикселей; радиус границы: 50%; курсор: указатель; -webkit-tap-highlight -color:rgba(0,0,0,0);transition:nd 0,3s}.toggle:focus{outline:none}.toggle .toggle-icon-line{position:absolute;top:23px;left:12px; right:12px;height:2px;background:white}.toggle .toggle-icon-line::before,.toggle .toggle-icon-line::after{content:'';position:absolute;display:block;height :2px;background-color:white;left:0;width:100%}.toggle .toggle-icon-line::before{top:-9px}.toggle .toggle-icon-line::after{bottom:- 9px}.toggle-x{background-color:#00b4ff}.toggle-x:hover{background-color:#007eb2}.toggle-x .toggle-icon-line{переход:фон 0 с линейный 0,3 с}.toggle- x .toggle-icon-line::before{transition-property:top,-webkit-transform;transition-property:top,transform}.toggle-x .toggle-icon-line::after{transition-property:bottom, -webkit-transform;transition-property:bottom,transform}.toggle-x .toggle-icon-line::before,.toggle-x .toggle-icon-line::after{transition-duration:0.3s,0.3s ;transition-delay:0.3s,0s}.toggle-x.active{background-color:#007eb2}.toggle-x.active .toggle-icon-line{background:none}.toggle-x.active .toggle- icon-line::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.toggle-x.active .toggle-icon-line ::after{дно:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.toggle-x.active .toggle-icon-line ::before,.toggle-x.active .toggle-icon-line::after{transition-delay:0s,0.3s} .переключать { положение: относительное; переполнение: скрыто; отображение: встроенный блок; маржа: 0; заполнение: 0; ширина: 48 пикселей; высота: 48 пикселей; граница-радиус: 50%; курсор: указатель; -webkit-tap-highlight-color:rgba(0,0,0,0); переход: фон 0,3 с; } .toggle:фокус { контур: нет; } .toggle .toggle-icon-line { позиция: абсолютная; верх: (48/2) – (48/2); слева: 12 пикселей; справа: 14 пикселей; высота: 2 пикселя; фон: RGB(255, 255, 255); } .toggle .toggle-icon-line::before, .toggle .toggle-icon-line::after { содержание: ''; позиция: абсолютная; дисплей: блок; высота: 2 пикселя; цвет фона: RGB(255, 255, 255); слева: 0; ширина: 100%; } .toggle .toggle-icon-line::before { верх: -((48/2) - (48/2) - 14); } .toggle .toggle-icon-line::after { низ: -((48/2) - (48/2) - 14); } .toggle-x { цвет фона: RGB (0, 180, 255); } .toggle-x:hover { фоновый цвет: RGB(0, 126, 178); } .toggle-x .toggle-icon-line { переход: фон 0 с, линейный 0,3 с; } .toggle-x .toggle-icon-line::before { свойство перехода: верх, преобразование; } .toggle-x .toggle-icon-line::after { свойство перехода: дно, преобразование; } .toggle-x .toggle-icon-line::before, .toggle-x .toggle-icon-line::after { продолжительность перехода: 0,3 с, 0,3 с; задержка перехода: 0,3 с, 0 с; } .toggle-x.active { цвет фона: rgb(0, 126, 178); } .toggle-x.active .toggle-icon-line { фон: нет; } .toggle-x.active .toggle-icon-line::before { верх: 0; преобразование: поворот (45 градусов); } .toggle-x.active .toggle-icon-line::after { внизу: 0; преобразование: поворот (-45 градусов); } .toggle-x.active .toggle-icon-line::before, .toggle-x.active .toggle-icon-line::after { задержка перехода: 0 с, 0,3 с; } .menu-wrap {     позиция: абсолютная;     z-индекс: 1001;     ширина: 300 пикселей;     высота: 100%;     отступ: 2,5em 1,5em 0;     размер шрифта: 1,15em;     -webkit-transform: Translate3d(-320px,0,0);     преобразование: Translate3d (-320 пикселей, 0,0);     -webkit-transition: -webkit-transform 0,4 с;     переход: преобразование 0,4 с;     -webkit-переход-тайминг-функция: кубический-безье (0.7,0,0.3,1);     функция времени перехода: кубическое Безье (0,7,0,0,3,1); } /* Показанное меню */ .show-menu .menu-wrap {     -webkit-transform: Translate3d (0,0,0);     преобразование: Translate3d (0,0,0);     -webkit-transition: -webkit-transform 0,8 с;     переход: преобразование 0,8 с;     -webkit-переход-тайминг-функция: кубический-безье (0.7,0,0.3,1);     функция времени перехода: кубическое Безье (0,7,0,0,3,1);     положение: фиксированное; } .show-menu .icon-list, .show-menu .icon-list а { } .show-menu .icon-list а {     -webkit-transition-duration: 0,9 с;     продолжительность перехода: 0,9 с; } .show-menu .content::before {     непрозрачность: 1;     -webkit-transition: непрозрачность 0,8 с;     переход: непрозрачность 0,8 с;     -webkit-переход-тайминг-функция: кубический-безье (0.7,0,0.3,1);     функция времени перехода: кубическое Безье (0,7,0,0,3,1);     -webkit-transform: Translate3d (0,0,0);     преобразование: Translate3d (0,0,0);                 [list]             [*]                 [url=#]Привет![/url]                      [/list]            [url=#]Добро пожаловать[/url]

Ответить

1 сообщение • Страница 1 из 1