2

Не открывается почему то меню при нажатии на гамбургер. Браузер пишет: "ReferenceError: toggleMenu is not defined". Помогите найти ошибку..

let menu = document.getElementsByClassName('menu')[0];
function toggleMenu() {
  if (menu.className === "menu") {
    menu.className += " open";
  } else {
    menu.className = "menu";
  }
}
.hamburger {
  display: none;
  width: 11px;
  height: 16px;
  float: right;
  margin: 6px;
  position: relative;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  z-index: 99;
  top: 23px;
  cursor: pointer;
}

.hamburger:after {
  content: "";
  position: absolute;
  display: block;
  right: 0;
  left: 0;
  top: 5px;
  height: 2px;
  background: #fff;
  z-index: 99;
}


@media (max-width: 992px) {
  .hamburger {
    display: block;
  }
  
  ul {
    left: -200px;
    background: #444;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 200px;
    transition: .2s;
    z-index: 999;
  }
  
  ul.open {
    left: 0;
  }
  
  li {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
    <div class="overlay"></div>
    <div class="container">
    <div class="row">
        <div class="col-lg-2 col-4 col-sm-3">
            <div>
                <img class="logo" src="img/logo.png" alt="Логотип">
            </div>
        </div>
        <div class="col-lg-7 d-none d-lg-block">
            <ul class="menu main_menu_list d-flex justify-content-center">
                <li class="main_menu_list_item">
                    <a href="#">Главная</a>     
                </li>
                <li class="main_menu_list_item">
                    <a href="about.html">О компании</a> 
                </li>
                <li class="main_menu_list_item">
                    <a href="move.html">Недвижимость и переезд</a> 
                </li>
                <li class="main_menu_list_item">
                    <a href="contacts.html">Контакты</a> 
                </li>
            </ul>
        </div>
        <div class="col-lg-3 d-lg-flex col-sm-6 col-md-5 ml-auto d-sm-flex d-none align-items-center">
            <div class="icon">
                <img class="modal1" src="img/phone.png" alt="icon">
            </div>
            <div class="phone">
                +7 (495) 12-321-345<br>
                +7 (495) 12-321-345
            </div>
        </div>
        <div class="hamburger col-1 ml-auto" onclick="toggleMenu();"></div>
    </div>
</div>
</nav>

4
  • Ну так вам в ошибке всё указали toggleMenu не определена. Чего вы от нас хотите?
    – ArchDemon
    Commented 1 сент. 2018 в 6:23
  • Я не знаю js. Только начинаю изучать.
    – Roman
    Commented 1 сент. 2018 в 6:23
  • Ну тогда изучите. За вас мы изучить не сможем
    – ArchDemon
    Commented 1 сент. 2018 в 6:49
  • Просто покажите где ошибка и все.. Мне полгода учить язык, который мне не нужен как frontend разработчику? Я нашел в интернете готовое решение, реализовал его, но оно не работает.. Вот и обратился на сайт за помощью. Разве не для этого создан этот сайт?
    – Roman
    Commented 1 сент. 2018 в 7:10

2 ответа 2

-1

Я ничего не знаю в JS, но отвечу.

let menu = document.getElementsByClassName('menu')[0];
function toggleMenu() {
  if (menu.className === "menu") {
    menu.className += " open";
  } else {
    menu.className = "menu";
  }
}

Тут вы переменную menu указали вне функции, к тому же саму функцию необходимо вложить в тег <script>:

<script>
function toggleMenu() {
  let menu = document.getElementsByClassName('menu')[0];
  if (menu.className === "menu") {
    menu.className += " open";
  } else {
    menu.className = "menu";
  }
}
</script>
1
  • js код весь у меня в js файле, подключенном к странице. но увы, после правки, предложенной вами, ничего не изменилось..
    – Roman
    Commented 1 сент. 2018 в 7:30
-1

Эммм... зачем подключать jQuery и писать на JS? Есть одна проблема. Ты не объявил когда эта функция должна инициализироваться.

$(document).ready(function(){
function toggleMenu() {
var menu = $('.menu') //добавь #id, на случай если класс повторится
menu.toggleClass('open');
}
})
1
  • Не помогло.. Может bootstrap мешает чем то?
    – Roman
    Commented 1 сент. 2018 в 7:45

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.