Передача функции «кнопке» во время анимации через jQuery?

Question

Как бы я передал функцию кнопке, когда анимация через jQuery?

JavaScript позволяет мне выбирать все данные из класса .nav-items и метод forEach для итерации этих данных и тега nav , чтобы, наконец, передать их классу с именем .navbar-toggle-show

Класс navbar-toggle-show в основном использует display:flex, когда экран находится на max-width:768px

На стороне jQuery я нахожу свои самые большие проблемы, потому что пока я могу исчезать/ Из значков, функция, которая позволяет мне переключать контент, не совсем работает. То, что я хотел бы сделать, это передать функцию переключения на вновь открывшуюся кнопку.

$("document").ready(()=>{
  $(".svg-nav-toggle").on('click', ()=>{
    $(".svg-nav-toggle").fadeOut("slow");
    $(".svg-nav-toggle-on").fadeIn("slow");
  });
  $(".svg-nav-toggle-on").on('click', ()=>{
    $(".svg-nav-toggle-on").fadeOut("slow");
    $(".svg-nav-toggle").fadeIn();
  });
});

body {
background-color: #afafaf
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="navbar">      
        <div class="nav-brand">
            <p>Blog Personal</p>
        </div> 

        <div class="svg-nav-toggle hide"> <!-- START OF SVG ICONS -->
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 10 20">
                    <defs>
                      <style>
                        .cls-1 {
                          opacity: 1;
                        }
                        .cls-2 {
                          fill: rgb(255, 255, 255);
                        }
                      </style>
                    </defs>
                    <title>Off</title>
                    <g class="cls-1">
                      <path class="cls-2" d="M7.4,1A1.6,1.6,0,0,1,9,2.6V17.4A1.6,1.6,0,0,1,7.4,19H2.6A1.6,1.6,0,0,1,1,17.4V2.6A1.6,1.6,0,0,1,2.6,1H7.4m0-1H2.6A2.6,2.6,0,0,0,0,2.6V17.4A2.6,2.6,0,0,0,2.6,20H7.4A2.6,2.6,0,0,0,10,17.4V2.6A2.6,2.6,0,0,0,7.4,0Z" transform="translate(0)"/>
                    </g>
                  </svg>
                </div>
                
                <div class="svg-nav-toggle-on hide">
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 16.1 16.1">
                    <title>On</title>
                    <circle cx="8.1" cy="8.1" r="7.6"
                  style="fill: white ;stroke: #fff;stroke-miterlimit: 10"/>
                  </svg>
                </div> <!-- END OF SVG ICONS -->

       <nav class="nav-items"> <!-- START OF NAVBAR -->
           <div class="nav-link">
            <a href="#">Acerca</a>
           </div>
           <div class="nav-link">
            <a href="#">Portafolio</a>
           </div>
           </nav>
        <nav class="nav-items nav-items-right">
           <div class="nav-link">
            <a href="#">Descargas</a>
           </div>
           <div class="nav-link">
            <a href="#">Contacto</a>
            </div>
        </nav> <!-- END OF NAVBAR -->
        
    </div>

JavaScript

function classToggle() {
  const navs = document.querySelectorAll('.nav-items')

  navs.forEach(nav => nav.classList.toggle('navbar-toggle-show'));
}

document.querySelector('.hide').addEventListener('click', classToggle);

Answer 1

«Пишите меньше, делайте больше» по-прежнему является очень верным слоганом jquery. В этом духе я позволил себе переписать ваш сценарий и сжал его в две строки. Поскольку я не был уверен в значении вашего назначения класса включения / выключения в classList.toggle('navbar-toggle-show'), я заменил этот бит простой функцией jquery- toggle(). Это ни в коем случае не идеально (например: почему кнопка «вкл» отображается изначально, когда навигационная панель уже включена?), Но, возможно, она может показать вам способ двигаться вперед.

Я заменил ваш $(".svg-nav").on('click',...)с $(".svg-nav").click(), поскольку это ограничивает события щелчка, которые будут записываться только на ".svg-nav" -divs. В противном случае целевой клик мог бы быть сам div, лежащий в его основе svg или даже элемент внутри (кружок или путь). Наличие цели клика «ограничено» теперь позволяет нам использовать функцию .sibling(), чтобы воздействовать на «другую» кнопку. И это позволяет обойтись без единой функции для обеих кнопок.

Я также поместил содержимое вашей функции classToggle() в функцию события щелчка, так как обе функции запускаются по существу в одной точке,Используя jquery, мне не нужно использовать все эти вещи forEach(), поскольку jquery по умолчанию будет действовать на все совпадающие элементы, поэтому метод .toggle() будет действовать на все найденные .nav-items. Аргумент внутри функции toggle () проверяет, происходил ли щелчок по кнопке «Вкл», которую я идентифицировал с помощью id="navon" в HTML. Если это так, элемент будет сделан видимым, в противном случае он будет скрыт.

$(()=>{
  $(".svg-nav").click(function(){
    $(this).fadeOut().siblings().fadeIn();
    $(".nav-items").toggle(this.id=="navon");
  });
});

body {
background-color: #afafaf
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="navbar">      
        <div class="nav-brand">
            <p>Blog Personal</p>
        </div> 

        <div class="svg-nav" id="navoff"> <!-- START OF SVG ICONS -->
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 10 20">
                    <defs>
                      <style>
                        .cls-1 {
                          opacity: 1;
                        }
                        .cls-2 {
                          fill: rgb(255, 255, 255);
                        }
                      </style>
                    </defs>
                    <title>Off</title>
                    <g class="cls-1">
                      <path class="cls-2" d="M7.4,1A1.6,1.6,0,0,1,9,2.6V17.4A1.6,1.6,0,0,1,7.4,19H2.6A1.6,1.6,0,0,1,1,17.4V2.6A1.6,1.6,0,0,1,2.6,1H7.4m0-1H2.6A2.6,2.6,0,0,0,0,2.6V17.4A2.6,2.6,0,0,0,2.6,20H7.4A2.6,2.6,0,0,0,10,17.4V2.6A2.6,2.6,0,0,0,7.4,0Z" transform="translate(0)"/>
                    </g>
                  </svg>
                </div>
                
                <div class="svg-nav" id="navon">
                <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 16.1 16.1">
                    <title>On</title>
                    <circle cx="8.1" cy="8.1" r="7.6"
                  style="fill: white ;stroke: #fff;stroke-miterlimit: 10"/>
                  </svg>
                </div> <!-- END OF SVG ICONS -->

       <nav class="nav-items"> <!-- START OF NAVBAR -->
           <div class="nav-link">
            <a href="#">Acerca</a>
           </div>
           <div class="nav-link">
            <a href="#">Portafolio</a>
           </div>
           </nav>
        <nav class="nav-items nav-items-right">
           <div class="nav-link">
            <a href="#">Descargas</a>
           </div>
           <div class="nav-link">
            <a href="#">Contacto</a>
            </div>
        </nav> <!-- END OF NAVBAR -->
        
    </div>