为什么在Safari和Firefox上不能使用此功能，而在Chrome上却不能使用？

Question

我有一个响应式导航菜单，它的工作方式如下：调整窗口大小时，“汉堡”（三行）出现一个图标。 单击此图标将显示菜单，并且通过转换，该图标将变为“ X”图标。 单击“ X”使菜单消失，图标再次变为三行。

它可以在Safari和Firefox中完美运行，但不能在Chrome中使用。 它将三行转换为“ X”，反之亦然，但菜单从未出现。 这是为什么？

这是代码：

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);
   }

非常感谢你的帮助！

PS：如果您能告诉我一种更好的方法来做此响应菜单，我将不胜感激！ 谢谢！ :)

Answer 1

当然！

这就是我解决问题的方法：

的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);
            }

Answer 2

如果您不使用CSS隐藏按钮，则代码运行正常：

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

http://jsfiddle.net/4towu13r/

如果使用-webkit- -o- ， -o- -moz ， -o-过渡前缀，则更好。

更新：

说明：chrome无法激活<button> <label> <button>内的<button> ，如果仅单击<label>则复选框已选中并完成工作。 这是完成此工作的jQuery解决方法：

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

工作代码： http : //jsfiddle.net/eapo/4towu13r/3/