Почему это работает над сафари и Firefox, но не на хроме? -- javascript поле с участием jquery поле с участием css поле с участием menu поле с участием responsive-design пол Связанный проблема

Why is this working on Safari and Firefox but not on Chrome?


0
vote

проблема

русский

У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот значок делает появление меню, и значок становится значком «X» путем преобразования. Нажав на «X» заставляет меню исчезнуть, и значок снова стал три строки.

Это отлично работает в Safari и Firefox, однако это не в хроме. Это делает трансформацию трех линий к «X» и VICEVERSA, но меню никогда не появляется. Почему это?

Вот код:

html:

 <код>     <nav>         <label for="show-menu" class="show-menu">             <button class="show-menu button-toggle-navigation">                 <span>Toggle Navigation</span>             </button>         </label>         <input type="checkbox" id="show-menu" role="button">         <ul>             <li><a href="about.html">Conóceme</a></li>             <li><a href="servicios.html">Servicios</a></li>             <li><a href="port.html">Portfolio</a></li>             <li><a href="contacto.html">Contacto</a></li>         </ul>     </nav>      [...]              <script type="text/javascript">         $('button').on('click', function() {             $(this).toggleClass('isActive');         });     </script>   

CSS:

 <код>      /*Style 'show menu' label button and hide it by default*/  .show-menu {    float: right;    width: 0;    height: 0;    text-align: right;    display: none;    margin-right: 15%;  }   /*Hide checkbox*/    input[type=checkbox]{      display: none;    }  /*Show menu when invisible checkbox is checked*/    input[type=checkbox]:checked ~ ul{       border-top-color: black;       float: right;       text-align: center;       display: block;       padding-top: 15%;    }     .button-toggle-navigation {        background-color: transparent;        border: 0;        border-bottom: 0.25em solid black;        border-top: 0.25em solid black;        font-size: 13px;        cursor: pointer;        height: 1.5em;        margin: .75em .375em;        outline: 0;        position: relative;        -webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;         transition: border-color 150ms ease-out, transform 150ms ease-out;        width: 2.25em;     }      .button-toggle-navigation::after, .button-toggle-navigation::before {         border-bottom: 0.25em solid black;         bottom: .375em;         content: '';         height: 0;         left: 0;         position: absolute;         right: 0;         -webkit-transition: -webkit-transform 200ms ease-out;           transition: transform 200ms ease-out;      }   .button-toggle-navigation span {     color: transparent;     height: 0;     width: 0;     overflow: hidden;     position: absolute;   }    .isActive {      border-color: transparent;      -webkit-transform: rotateZ(90deg);       transform: rotateZ(90deg);    }     .isActive::after, .isActive::before {       -webkit-transition: -webkit-transform 200ms ease-out;       transition: transform 200ms ease-out;    }     .isActive::after {       -webkit-transform: rotateZ(45deg);       transform: rotateZ(45deg);    }     .isActive::before {       -webkit-transform: rotateZ(-45deg);       transform: rotateZ(-45deg);    }   

Большое спасибо за вашу помощь!

P.S: Если вы можете сказать мне лучший способ сделать это отзывчивое меню, я был бы признателен! Спасибо! :)

Английский оригинал

I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.

It works perfectly in Safari and Firefox, however it doesn't in Chrome. It makes the transformation of three lines to 'X' and viceversa but the menu never appears. Why is that?

Here's the code:

HTML:

    <nav>         <label for="show-menu" class="show-menu">             <button class="show-menu button-toggle-navigation">                 <span>Toggle Navigation</span>             </button>         </label>         <input type="checkbox" id="show-menu" role="button">         <ul>             <li><a href="about.html">Conóceme</a></li>             <li><a href="servicios.html">Servicios</a></li>             <li><a href="port.html">Portfolio</a></li>             <li><a href="contacto.html">Contacto</a></li>         </ul>     </nav>      [...]              <script type="text/javascript">         $('button').on('click', function() {             $(this).toggleClass('isActive');         });     </script> 

CSS:

     /*Style 'show menu' label button and hide it by default*/  .show-menu {    float: right;    width: 0;    height: 0;    text-align: right;    display: none;    margin-right: 15%;  }   /*Hide checkbox*/    input[type=checkbox]{      display: none;    }  /*Show menu when invisible checkbox is checked*/    input[type=checkbox]:checked ~ ul{       border-top-color: black;       float: right;       text-align: center;       display: block;       padding-top: 15%;    }     .button-toggle-navigation {        background-color: transparent;        border: 0;        border-bottom: 0.25em solid black;        border-top: 0.25em solid black;        font-size: 13px;        cursor: pointer;        height: 1.5em;        margin: .75em .375em;        outline: 0;        position: relative;        -webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;         transition: border-color 150ms ease-out, transform 150ms ease-out;        width: 2.25em;     }      .button-toggle-navigation::after, .button-toggle-navigation::before {         border-bottom: 0.25em solid black;         bottom: .375em;         content: '';         height: 0;         left: 0;         position: absolute;         right: 0;         -webkit-transition: -webkit-transform 200ms ease-out;           transition: transform 200ms ease-out;      }   .button-toggle-navigation span {     color: transparent;     height: 0;     width: 0;     overflow: hidden;     position: absolute;   }    .isActive {      border-color: transparent;      -webkit-transform: rotateZ(90deg);       transform: rotateZ(90deg);    }     .isActive::after, .isActive::before {       -webkit-transition: -webkit-transform 200ms ease-out;       transition: transform 200ms ease-out;    }     .isActive::after {       -webkit-transform: rotateZ(45deg);       transform: rotateZ(45deg);    }     .isActive::before {       -webkit-transform: rotateZ(-45deg);       transform: rotateZ(-45deg);    } 

Thanks a lot for your help!

P.S: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)

</div
              
 
 

Список ответов

0
 
vote

Конечно!

Вот как я решил проблему:

html

 <код> !9  

js

 <код> goto0  

CSS

 <код> goto1  
 

Sure!

This is how I solved the problem:

HTML

        <nav>         <label for="show-menu"xs class="show-menu">             <button id="pull" class="show-menu button-toggle-navigation"></button>         </label>         <ul>             <li><a href="about.html">Conóceme</a></li>             <li><a href="servicios.html">Servicios</a></li>             <li><a href="port.html">Portfolio</a></li>             <li><a href="contacto.html">Contacto</a></li>         </ul>     </nav> 

JS

    <script type="text/javascript">     var menu = $("nav ul");      $('#pull').on('click', function() {       $(this).toggleClass('isActive');       menu.slideToggle(200);     }); </script> 

CSS

/*Style 'show menu' label button and hide it by default*/  .show-menu {    margin-top: 7%;    float: right;    display: block; }   .button-toggle-navigation {      background-color: transparent;      border: 0;      border-bottom: 0.16em solid black;       border-top: 0.16em solid black;       font-size: 1em;      cursor: pointer;       height: 1.2em;       margin: .75em .375em;       outline: 0;       position: relative;        -webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;         transition: border-color 150ms ease-out, transform 150ms ease-out;        width: 2.25em;       }        .button-toggle-navigation::after, .button-toggle-navigation::before {           border-bottom: 0.16em solid black;           bottom: .375em;            content: '';           height: 0;           left: 0;           position: absolute;           right: 0;           -webkit-transition: -webkit-transform 200ms ease-out;            transition: transform 200ms ease-out;          }            .isActive {              border-color: transparent;              -webkit-transform: rotateZ(90deg);              transform: rotateZ(90deg);           }           .isActive::after, .isActive::before {               -webkit-transition: -webkit-transform 200ms ease-out;                transition: transform 200ms ease-out;            }            .isActive::after {                -webkit-transform: rotateZ(45deg);                transform: rotateZ(45deg);            }            .isActive::before {                -webkit-transform: rotateZ(-45deg);                transform: rotateZ(-45deg);             } 
</div
 
 
-1
 
vote
<Р>, если non't скрыть кнопку с помощью CSS, код работает отлично:
 <код> goto2  
<Р> http://jsfiddle.net/4towu13r/ <Р> лучше, если вы используете <код> goto3 , <код> goto4 , <код> goto5 переходные префиксов.

<Сильное> Обновление:

<Р> объяснение: как-то хром не может активировать <код> goto6 внутри <код> goto7 , если вы только нажать на <код> goto8 клавиши флажок проверяется и сделать эту работу. Вот JQuery временного решения, чтобы сделать работу:
 <Код> goto9  
<Р> рабочий код: http://jsfiddle.net/eapo/4towu13r/3/
 

if you non't hide your button with CSS, the code is working perfectly:

.show-menu {    float: right;    text-align: right;    margin-right: 15%;  } 

http://jsfiddle.net/4towu13r/

better if you use the -webkit-, -moz, -o- transition prefixes to.

UPDATE:

explanation: somehow chrome unable to activate <button> inside the <label>, if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:

        checkbox=$('input[role=button]');         checkbox.prop('checked', !checkbox.prop('checked')); 

working code: http://jsfiddle.net/eapo/4towu13r/3/

</div
 
 
       
       

Связанный проблема

-2  Как мне получить значение флажков ряд в таблице JavaScript  ( How do i get value of a checkboxes of a row in a table javascript ) 
Это может быть глупым вопросом, но мне нужно получить значения проверенных флажков определенной строки. <код> script5 Так что в основном я хочу, чтобы по...

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

0  Скачать изображение из результатов API  ( Download image from api results ) 
Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 ...

0  Нужен React Router Pro, чтобы помочь мне  ( Need a react router pro to help me ) 
Итак, сегодня я играл с маршрутизатором RACT и попытался изменить это Пример . Я хочу достичь этого: . Боковой NAV отображает только имена Когда пол...

1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки  ( Angular js validation function returns before the api call for validation is com ) 
<код> if (!validate()) { return; }; function validate() { var nameIsValid = ...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...

5  модальный всплывающий как Google  ( Modal pop up like google ) 
Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы) ...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

183  Вертикально центрирующее модальное окно Bootstrap  ( Vertically centering bootstrap modal window ) 
Я хотел бы центрировать мою модаль на ViewPort (Middle), я пытался добавить некоторые свойства CSS <код> .modal { position: fixed; top:50%; left:50%; } ...

0  Boxy Эта отправка не работает  ( Boxy this submit does not work ) 
У меня есть несколько форм в моем коде, и я хочу назначить подтверждающее поле, чтобы показать, прежде чем он будет отправлен. Следовательно, я использую Bo...

1  Как проверить отметку Check Column в сетке?  ( How to check mark a check column in a grid ) 
У меня есть флажок Check Column на сетке, которая мне нужна для программически проверки. Вот как сценарий Check Column: <код> columns: { items:[ ...

1  Если для JavaScript в XSLT не работает [дубликат]  ( If greater than javascript into xslt doesnt work ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...