На странице расположены три svg картинки. 1.Меню (menu.svg). 2.Рисунок (geography.svg) и 3. Рисунок (fullmap.svg). Обнаружил что при нажатии на 2-й и 3-й тоже срабатывает открытие меню, что должно происходить только при клике на меню. Менял названия в скрипте и html, ковыряю 3-й день этот код не могу найти где подвох.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Название
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container" >
<div class="mobile_menu_block""><img src="img/icon/menu.svg" class="ham hamRotate" onclick="this.classList.toggle('active')"alt="mobile_botton">
</div>
<div class="overlay">
<ul>
<li><a href="index.html">- ВЕРНУТЬСЯ -</a></li>
<li><a href="">- ЧАСТЫЕ ВОПРОСЫ -</a></li>
<li><a href="">- УЗНАЙ СТОИМОСТЬ -</a></li>
<li><a href="tel:+792665432109">+7 (926) 654-321-09</a></li>
</ul>
</div>
<!-- Panels -->
<div class="swipe">
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%205_o.jpg">
</div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/3%20-%20Interiores%201_o.jpg">
</div>
<div class="panel" data-img="https://a.radikal.ru/a08/2003/c7/c85d654e7fee.jpg">
<div class="map"><img src="img/fullmap.svg">
</div>
<div class="geography"><img src="img/geography.svg">
</div>
<div class="vulcan">
<div class="fog_1"></div>
<div class="fog_2"></div>
<div class="fog_3"></div>
</div>
</div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%205_o.jpg">
</div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/3%20-%20Interiores%201_o.jpg">
</div>
</div>
<div class="info">
<div class="buttons"><button class="btn-prev"><p class="btn_prev">
<b>
W
</b>
</p>
</button>
<button class="btn-next"><p class="btn_next">
<b>
E
</b>
</p>
</button>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script>
<script src="js/index.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="js/main.js"></script>
<script src="js/menu.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/jquery-2.1.1.js"></script>
</body>
</html>
const $icon = $('img');
const $menu = $('.overlay');
$icon.on('click', function(){
if(!$menu.hasClass('active')) {
$menu.fadeIn().toggleClass('active');
} else {
$menu.fadeOut().removeClass('active');
}
});
