Блог

Я просто пытаюсь просто использовать 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");
});
  

И вот живая версия:Живой пример

У меня есть значок гамбургера, который при нажатии анимируется, чтобы измениться на x. Я нашел код в Интернете, и он работает нормально, но я не уверен, что это то, что мешает переключаемому классу. Когда я проверяю элемент, я вижу, что класс .open добавляется и удаляется, но ничего не меняется.

Надеюсь, это не слишком простое решение…Хотя спасибо за чтение!

Попробуйте без . в 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;
}
  

Используйте это:

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

Вместо этого

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

Вам не нужна точка в качестве префикса, поскольку метод уже предполагает, что его аргументом является класс.