Активировать бургер при клике по div js?

Question

[Сергей Миллер]

Всем привет. Имеется бургер-меню, которое раскрывается при клике на сам бургер, который тоже меняет свою форму на вид крестика.

То есть при клике на .burger появляется к .menu добавляется класс .open. Я заключил всё меню в div.contain, но при попытке в скрипте вместо .burger вставить .contain меню активируется, а вот сам бургер в "крестик" не трансформируется.

$(".burger").on("click", function() {
  $(this).toggleClass("active");
  $(".menu").toggleClass("open");
})

<div class="contain">
  <!--добавил div-->
  <div class="burger">
    <span id="melt"><span id="extra-melt"></span></span>
  </div>
  <div class="menu">
    <ul class="nav">
      <li><a href="#services">Услуги</a></li>
      <li><a href="#advantages">Преимущества</a></li>
      <li><a href="#projects">Проекты</a></li>
      <li><a href="#plan">Порядок работ</a></li>
      <li><a href="#testimonials">Отзывы</a></li>
      <li><a href="#partners">Партнеры</a></li>
      <li><a href="#callus">Свяжитесь с нами</a></li>
    </ul>
  </div>

.contain{width:25px;height:45px;top: 2px;position:absolute;left:1508px}
.burger{width:20px;height: 3px;background: #000;margin:26px auto;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;-moz-transition: all 0.3s;
/*&:hover{
& #top-bun{-webkit-transform: rotate(20deg);margin-top: -20px;margin-left:5px;}}*/;}
.burger:before{width:20px;height: 3px;position: absolute;content: '';z-index: 11;-webkit-transition: all 0.3s;transition: all 0.3s;-moz-transition: all 0.3s}
.burger:after{margin-top:6px;position:absolute;content: '';width: 20px;height: 3px;-webkit-transition: all 0.3s;transition: all 0.3s;-moz-transition: all 0.3s;background:#000000}
#melt{width: 15px;height: 3px;position: absolute;background: #000000;margin-top: 12px;z-index: 11;-webkit-transition: all 0.3s;transition: all 0.3s;-moz-transition: all 0.3s}
#extra-melt:before {position: absolute;content: '';width: 2px;height: 0px;-webkit-transition: all 0.5s;transition: all 0.5s;
-moz-transition: all 0.5s;background: #ecec13;margin-left: -7px;}
#top-bun,#seeds,#lettuce-tom,#extra-melt,#melt:before,#melt:after{display:none}
.menu{width: 0px;overflow: hidden;position: absolute;right: 30px;top: 0px;padding-right: 8px;-webkit-transition: all 0.3s;transition: all 0.3s;-moz-transition:all 0.3s}
header ul{list-style: none;margin: 0;padding: 0;width: 900px;background: #fff;height:64px;line-height:62px}
header ul li a{color:#4c4c4c}
header ul li{cursor: pointer;display: inline-block;color:#4c4c4c;font-family:'Rubik',sans-serif;margin: 0 17px;font-weight: 400;font-size: 16px;-webkit-transition: all 0.2s;transition: all 0.2s;-moz-transition: all 0.2s;border-bottom: 1px solid transparent}
header ul li a:hover{border-bottom:4px solid #ffd600;color:#4c4c4c;padding-bottom:20px}
.burger.active:before {-webkit-transform: rotate(5deg);transform: rotate(5deg);-moz-transform: rotate(15deg);-ms-transform: rotate(15deg);-o-transform:rotate(15deg);}
.burger.active:after{transform:rotate(100deg);-webkit-transform:rotate(100deg);-moz-transform:rotate(100deg);-moz-transition:rotate(100deg);-o-transform:rotate(100deg);margin:0}
.burger.active{transform:rotate(40deg);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-moz-transition:rotate(40deg);-o-transform:rotate(40deg);margin:30px auto}
.burger.active #melt{height:3px;margin-top:0px;display:none}
.burger.active #melt:before {width: 3px;margin-top: 2px;}
.burger.active #melt:after {width: 2px;height: 11px;}
.burger.active #extra-melt {height: 13px;}
.burger.active #extra-melt:before {height: 7px;}
.burger.active #lettuce-tom:before {-webkit-transform: rotate(5deg);margin-left: 13px;}
.menu.open{width:900px}

Answer 1

[tyzberd]

$(".contain").on("click", function() {
  $(this).find(".burger").toggleClass("active");
  $(".menu").toggleClass("open");
})

Comments

[Сергей Миллер]

Воу, спасибо, бро!