Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2020, 19:25
Новичок на форуме
Отправить личное сообщение для Romazan13 Посмотреть профиль Найти все сообщения от Romazan13
 
Регистрация: 19.03.2020
Сообщений: 4

Открывается меню при клике на любой файл SVG
На странице расположены три 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');
  }
});
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2020, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,118

Romazan13,
строки 69 и 75 зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2020, 20:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,118

Romazan13,
<!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">
        <p class="btn_prev"><button class="btn-prev"><b>W</b></button></p>
        <p class="btn_next"><button class="btn-next"><b>E</b></button></p>
      </div>
    </div>
  </div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
$(function() {
const $icon = $('.mobile_menu_block');
const $menu = $('.overlay').addClass('active');
$icon.on('click', function(){
    $menu.stop().fadeToggle().toggleClass('active');
});
});
  </script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 26.03.2020, 21:02
Новичок на форуме
Отправить личное сообщение для Romazan13 Посмотреть профиль Найти все сообщения от Romazan13
 
Регистрация: 19.03.2020
Сообщений: 4

Рони спасибо большое, проблема решена) только 1 момент нужно отметить.
Всё таки "<script src="js/index.js"></script>" видимо необходим, так как без него просто почему-то желтый фон и стрелки листания галереи и больше ничего. Дописал его в ваш вариант - всё ок. Спасибо большое
Ответить с цитированием
  #5 (permalink)  
Старый 26.03.2020, 21:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,118

Сообщение от Romazan13
Всё таки "<script src="js/index.js"></script>"
вопрос был про необходимость убрать дубликаты jquery, а не про index.js. в нормальном случае достаточно одной версии jquery.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 02:03
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 19:59
Выделение активного пункта меню при ajax запросе faecker AJAX и COMET 6 04.09.2014 18:14
Событие при клике на любой элемент кроме одного shaltay jQuery 1 29.11.2011 17:27
Dojo может подгружать информацию из пунктов меню только при клике на выбранный пункт? vlad275 Dojo toolkit 0 30.10.2008 14:56