jQuery Добавление/удаление классов на кнопке для скрытия элементов

Question

Пытается получить меню нижнего колонтитула мобильного телефона (# mobile-menu), чтобы скрыть/показать, когда нажата или нажата кнопка плавающей кнопки. Я могу добавить обработчик события click к кнопке (# mobile-footer-btn), которая по очереди применяет класс к меню и анимирует его с экрана.

<footer id="mobile-footer"> 
    <div id="mobile-menu"> 
    <div id="mobile-footer-container"> 
     <div class="mobile-link"> 
     <a href="#" class="text-center">My Account</a> 
     </div> 
     <div class="mobile-link"> 
     <a href="#" class="text-center">Reviews</a> 
     </div> 
     <div class="mobile-link"> 
     <a href="#" class="text-center">Contact Us</a> 
     </div> 
    </div> 
    </div> 
    <div id="mobile-footer-close"> 
    <button id="mobile-footer-btn"> 
     <div class="mobile-btn-close"> 
     <span></span> 
     </div> 
    </button> 
    </div> 
</footer> 

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

jQuery(document).ready(function($){ 
    // Store menu container 
    var mobileMenu = '#mobile-menu'; 
    // Store Trigger 
    var mobileBtn = '#mobile-footer-btn'; 

    //Trigger closing the footer menu 
    $(mobileBtn).on("click", function() { 
     $(mobileMenu).addClass('mobile-menu-hide'); 
    }); 

    $('.mobile-btn-close').click(function() { 
     $(this).addClass('is-rotating'); 
    }); 

    if($(mobileMenu).hasClass('mobile-menu-hide')) { 
     $(mobileBtn).on("click", function(e) { 
      e.stopPropagation(); 
      $(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show"); 
     }); 
    } 
}); 

Любая помощь будет очень признательна!

Answer 1

Вам нужно только одно событие click! Ваше условие if никогда не оценивается как истинное, поэтому ваше событие onclick никогда не запускается. Лучше разместить его в одном событии onclick. Вот код:

jQuery(document).ready(function($){ 
    // Store menu container 
    var mobileMenu = '#mobile-menu'; 
    // Store Trigger 
    var mobileBtn = '#mobile-footer-btn'; 

    $('.mobile-btn-close').click(function() { 
     $(this).addClass('is-rotating'); 
    }); 

    $(mobileBtn).on("click", function(e) { 
     e.stopPropagation(); 
     if($(mobileMenu).hasClass('mobile-menu-hide')) { 
      $(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show"); 
     } else { 
      $(mobileMenu).removeClass("mobile-menu-show").addClass("mobile-menu-hide"); 
     } 
    }); 
}); 

Вот plunker: https://plnkr.co/edit/SG8eFns91wV4adxapFDB

Даже лучше, что я об этом думаю: просто переключить один класс, который скрывает меню и просто использовать toggleClass функции JQuery в. Что-то вроде этого:

$(mobileBtn).on("click", function(e) { 
    e.stopPropagation(); 
    $(mobileMenu).toggleClass('mobile-menu-hide'); 
}); 

Answer 2

Проблема в том, что ваше состояние if выполняется только в одном блоке. Однако вам нужно, чтобы это вызывалось при каждом нажатии. Следовательно, вам нужно обновить свой код к следующему

jQuery(document).ready(function($){ 
    // Store menu container 
    var mobileMenu = '#mobile-menu'; 
    // Store Trigger 
    var mobileBtn = '#mobile-footer-btn'; 

    //Trigger closing the footer menu 
    $(mobileBtn).on("click", function() { 
     // moved your if block inside the click handler 
     if($(mobileMenu).hasClass('mobile-menu-hide')) { 

      e.stopPropagation(); 
      $(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show"); 

     } else {   
      $(mobileMenu).addClass('mobile-menu-hide'); 
     } 
    }); 

    $('.mobile-btn-close').click(function() { 
     $(this).addClass('is-rotating'); 
    }); 

}); 

Answer 3

Ваш $(mobileBtn).on("click", function(e) { ... код никогда не выполняется, и, следовательно, никогда не добавляет обработчик события клика, потому что меню не запускается, как .mobile-menu-hide Попробуйте

$(mobileBtn).on("click", function(e) { 
    if($(mobileMenu).hasClass('mobile-menu-hide')) { 
     e.stopPropagation(); 
     $(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show"); 
    } 
});