Почему не работает клик на бургер меню?

Question

[Nursultan Chynarbek uulu]

Написал следующий код:

<div class="wrapper">
		<div class="header">
			<div class="container">
				<div class="header__body">
				    <div class="header__logo">
						<a href="#">
							<img src="img/twitter.png" alt="" class="twitter">
						</a>
					</div>
					<div class="menu">
						<div class="header__burger">
							<span></span>
						</div>
						<div class="header__menu">
						<ul class="header__list">
							<li>
								<a href="#" class="header__link">Home</a>
							</li>
							<li>
								<a href="#" class="header__link">Explore</a>
							</li>
							<li>
								<a href="#" class="header__link">Notifications</a>
							</li>
							<li>
								<a href="#" class="header__link">Massege</a>
							</li>
							<li>
								<a href="#" class="header__link">Bookmarks</a>
							</li>
						</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

.twitter{
  width: 60px;
}
.wrapper {
  font-family: 'Lato', sans-serif;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}
.header:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #008000;
  z-index: 2;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 10px;
}
.header__body {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
}
.header__burger {
  display: none;
}
.header__logo{
  z-index: 3;
}
.header__list {
  display: flex;
  position: relative;
  z-index: 2;
}
.header__list li{
  list-style: none;
  margin-left: 20px;
}
.header__link {
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  text-decoration: none;
}
.content {}
.content__text {
  padding-top: 100px;
}
.content__text h2{
  font-size: 25px;
  line-height: 40px;
  margin-top: 20px;
}
.content__text p {
  font-size: 18px;
  line-height: 25px;
  margin-top: 20px;
}
@media (max-width: 1767px) {
  .header__body {
    height: 50px;
  }
  .twitter{
    width: 40px;
  }
  .header__burger {
    display: block;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 3;
  }
  .header__burger span {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    left: 0;
    top: 9px;
  }
  .header__burger:before,
  .header__burger:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    left: 0;
  }
  .header__burger:before{
    top: 0;
  }
  .header__burger:after{
    bottom: 0;
  }
  .header__menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #98FB98;
    padding: 70px 10px 20px 10px;
  }
  .header__list {
    display: block;
  }
  .header__list li{
    margin: 0 0 20px 0;
  }
}

$('.header__burger').click(function(){
	$('.header__burger', 'header__menu').toggleClass('active');
});

Не работает клик на бургер и следующее добавление класса.

Comments

[Steppp]

Так может клик не по бургеру, а по span который внутри бургера?
Смотри в консоли куда кликаешь!

Answer 1

[MagnusDidNotBetray]

$(Вот тут) должен быть валидный css селектор, а не любая строка, которую вы придумали.
Так будет работать:

$('.header__burger').click(function(){
  $('.header__burger').toggleClass('active');
  $('.header__menu').toggleClass('active');
});

Comments

[Nursultan Chynarbek uulu]

Спасибо за ответ но не работает возможно ли такое что дело не в jquery коде а в чем то другом? У меня просто при наведении мыши не работает н даже возможность клика

[MagnusDidNotBetray]

Nursultan Chynarbek uulu, проблема точно была в этом коде. При наведении мыши оно и не будет работать, класс active добавляется при клике на кнопку, можете проверить в консоли.
Или под не работает, вы имеете в виду, визуально ничего не меняется? Так в вашем css нет никаких стилей для этого класса.