Как закрыть меню при повторном клике?

Question

[Сергей Горячев]

Привет.
Что-то жара как-то совсем плохо влияет на меня.
https://jsfiddle.net/webirus/r8yLhagp/ - вот мой вариант.
Не могу написать скрипт закрытия меню по клику на навикон.
Кто подскажет, как это реализовать?

Answer 1

[devstudent]

$(document).ready(function(){
 $('.navicon').click(function(){
        $('.leftbar').toggleClass('active');
     });
});

.leftbar {-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}

.leftbar.active {left: 0; position: relative;}

Answer 2

[Олег]

https://jsfiddle.net/r8yLhagp/2/
Лучше использовать CSS анимации, и лучше через transform.

Answer 3

[Greg Popov]

Лучше делать такие вещи с помощью CSS:
когда есть .active, то реализовывается перепозиционирование (просто меняется занчение left), при этом мы устанавливаем на .leftbar анимацию для position и имеем результат.

P.S. Используйте .stop().animate(), это предотврватит дерганую анимацию, стек событий будет очищаться и они не будут выполняться дург за другом

Answer 4

[ArturArturov]

$(document).ready(function(){

    $('.navicon').click(function(){
        $('.leftbar').toggleClass('active');
    });
   
});

.leftbar{
  transition: .3s;
}
.leftbar.active{
  left: 0;
}

Answer 5

[Artem Arsenowitch]

api.jquery.com/toggle так проще

или так, но это не очень красиво
https://jsfiddle.net/wfyx6kx5/

Answer 6

[Михаил Мединский]

https://jsfiddle.net/0v2tcjmc/1/

Answer 7

[lega]

В кучу: https://jsfiddle.net/lega911/8n0k8ja5/