菜单toggleClass打开不起作用

Question

我只想简单地使用toggleClass在关闭的菜单上触发.open类。以下是

之前和之后的图片

所以我知道这很简单，因为我之前已经开始工作，但我无法弄清楚它为什么现在不能工作。

我的HTML是这样的：

<div id="nav">
     <h1>SAKURA GARAGE</h1>
     <a href="javascript:void(0)" id="button" class="menu_toggle_container">
     <span class="menu_toggle"></span>
     </a>
     <ul class="menu">
          <li><a href="#" title="products">Products</a></li>
          <li><a href="#" title="services">Services</a></li>
          <li><a href="#" title="gallery">Gallery</a></li>
          <li><a href="#" title="about">About</a></li>
     </ul>
</div>

我的css是：

#nav{
background-color:black;
position:absolute;
z-index:115;
top:0;
padding:18px 0 18px 25px;
@include span-columns(12);
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out; 
    h1{
    @include span-columns(5);
    letter-spacing: .1em;
    }

    .menu{
    height:0em;
    max-height:0%;
    overflow:hidden;
    }

    .open{
    height:10em;
    max-height:100%;
    overflow:hidden;
    }
}

Jquery的：

$("#button").click(function(){
    $(".menu").toggleClass(".open");
});

这是一个实时版本：Live Example

我有一个汉堡包图标，点击后，动画变为x。我在网上找到了这个代码并且工作正常，但是我不确定这是不是有什么东西搞乱了切换类。当我检查元素时，我可以看到.open的类被添加和删除，但没有任何变化。

希望这不是一个简单的解决方案......感谢阅读！

Answer 1

尝试不使用.方法中的toggleClass：

$(".menu").toggleClass("open");

另外，你的CSS有点偏。在}课程之后，你有一个额外的结束.open。这是Stack Overflow的拼写错误吗？结束}应该在声明#nav属性之后。

这样的事情：

#nav{
  background-color:black;
  position:absolute;
  z-index:115;
  top:0;
  padding:18px 0 18px 25px;
  @include span-columns(12); /* not sure what this does? */
  -webkit-transition: height 0.5s ease-in-out;
  -moz-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
}

h1{
  @include span-columns(5); /* not sure what this does? */
  letter-spacing: .1em;
}

.menu{
  height:0em;
  max-height:0%;
  overflow:hidden;
}

.open{
  height:10em;
  max-height:100%;
  overflow:hidden;
}

Answer 2

使用此：

 $(".menu").toggleClass("open");

而不是这个

  $(".menu").toggleClass(".open");

您不需要使用点作为前缀，因为该方法已将其参数假定为类。