菜单切换类打开不起作用

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

你不需要一个点作为前缀，因为该方法已经假定它的参数是一个类。