Открытие и закрытие мобильного адаптивного меню

Я пытаюсь создать мобильное адаптивное меню «гамбургер». HTML-код, который я использую для этого, приведен ниже...

.menu_closed {
  color: red;
}
.menu_open {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $('span.menu_closed').click(function() {
    $('ul.menu').toggle('1000');
    $(this).toggleClass("menu_open menu_closed");
  });
</script>
<span class="menu_closed">&#9776;</span>
<ul class="menu" id="menu">
  <ul class='section' id='section_1'>
    <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
      <ul>
        <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a>
        </li>
        <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a>
        </li>
        <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a>
        </li>
        <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_2'>
    <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
      <ul>
        <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_5'>
    <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
      <ul>
        <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
        </li>
        <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
        </li>
        <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_4'>
  </ul>
  <div class='bot'>
    <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a>
      <br />
      <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a>
    </p>
  </div>
</ul>

Почему-то не закрывается и не открывается как надо. Я понятия не имею, что случилось.

Буду признателен, если кто-нибудь сможет помочь.

Джек

Community 15.01.2017 источник

comment

Откройте консоль и посмотрите, нет ли ошибок. Скорее всего, jquery не загружается перед вашим скриптом, что делает ваши переменные неопределенными. - Ryan Green 15.01.2017

comment

Вы включили jQuery в код? Его нет в вопросе. - Leo Wilson 15.01.2017

comment

Я загрузил jQuery. Я использовал его для других вещей на странице. Сейчас проверю на ошибки. Спасибо. Я не включил jQuery в вопрос. Я поправлю это сейчас. - 15.01.2017

comment

В консоли ошибок нет. - 15.01.2017

Ответы (2)

arrow_upward
0
arrow_downward

$('span.menu_closed').click(function() { должен ссылаться на стандартный класс меню, например .hamburger, а не .menu_closed, потому что, если вы измените .menu_closed на .menu_open, тогда .menu_closed больше не будет существовать, и вы потеряете обработчик кликов.

$(this).toggleClass("menu_open menu_closed"); должен просто переключать класс, например open или closed. Технически то, что вы делаете, будет работать нормально, если имя класса .menu_open, и вы обновите эту строку $.toggleClass(), чтобы переключить класс .menu_closed, но тогда вы получите элемент с именем span.menu_open.menu_closed. Лучше назвать меню чем-то агностическим, а затем переключать, открыто оно или нет.

Также в меню добавлено cursor: pointer;, чтобы указать пользователю, что вы можете щелкнуть элемент.

Обернул ваш код jQuery в $(function() {});, что заставит страницу ждать запуска JS, пока DOM не будет готов. Это необходимо, поскольку ваш JS идет перед остальной частью HTML на странице.

И изменил обработчик кликов с $.live() (устаревший) на $.on(). $.live() был устарел в версии 1.7 и удален в версии 1.9, и jQuery рекомендует использовать $.on() сейчас для присоединения обработчиков событий.

.hamburger {
  color: red;
  cursor: pointer;
}
.open {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('.hamburger').on('click',function() {
       $('ul.menu').toggle(1000);
       $(this).toggleClass("open");
    });
  });
</script>
<span class="hamburger">&#9776;</span>
<ul class="menu" id="menu">
  <ul class='section' id='section_1'>
    <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
      <ul>
        <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a>
        </li>
        <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a>
        </li>
        <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a>
        </li>
        <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_2'>
    <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
      <ul>
        <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_5'>
    <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
      <ul>
        <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
        </li>
        <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
        </li>
        <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_4'>
  </ul>
  <div class='bot'>
    <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a>
      <br />
      <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a>
    </p>
  </div>
</ul>

Michael Coker 15.01.2017

comment

Большое спасибо. Я понимаю все это, кроме: И изменил ваш обработчик кликов с использования $.live() (устаревший) на $.on(). Не могли бы вы быстро объяснить это еще раз. Я только начал с jQuery и js - ; 15.01.2017

comment

@Джек, не за что! Обновил мой ответ. $.live() был удален из jquery 1.9, и теперь они рекомендуют использовать $.on() для обработчиков событий. - Michael Coker; 15.01.2017

arrow_upward
0
arrow_downward

hey man i tried your code it's working fine here is

https://jsfiddle.net/L0vnd4ay/

Bhautik 15.01.2017

Открытие и закрытие мобильного адаптивного меню

Ответы (2)

Вопросы по теме