Блог

У меня есть этот скрипт в заголовке html:

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    $(function () {
        $('.nav-toggle').on('click',function(){
            $('.mainnav').toggleClass('open');
        });
    });
</script>
 

который должен срабатывать, когда:

 <header>
    <img class="nav-toggle" src="static/images/menunav.png" style="cursor: pointer;">
</header>
 

щелчок по этому изображению.

и переключите подкласс, открытый в:

 <ul class="text mainnav">
        <li>Home</li>
        <li>Projects</li>
        <li>Techniques</li>
        <li>About me</li>
    </ul>
 

Но он не будет запускать класс .open? Что я здесь делаю не так (первый пользователь jquery).

CSS:

 .nav-toggle {
  float: right;
  margin-right: 70px;
}

    .mainnav{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #222;
      text-align: center;
      list-style: none;
      display: inline-block;
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }

    .mainnav.open {
      transform: translateX(50%);
}
 

Я думаю, проблема в html. Попробуйте разделить

 <script src="[JQuery CDN]"></script>
<script>
$(function(){ ... });
</script>