Javascript jQuery在按钮上添加/删除类以隐藏元素

尝试在单击或点击浮动按钮时隐藏/显示移动页脚菜单（#移动菜单）。我可以将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>

---

任何帮助都将不胜感激

问题在于块中的

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');
    });

});

您的

$（mobileBtn）.on（“click”，函数（e）{…

代码永远不会执行，因此永远不会添加click事件处理程序，因为菜单不是以

开头的。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");
    }
});

---

您只需要一个单击事件！您的if条件永远不会被计算为true，因此您的

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");
        }
    });
});

这是普朗克：

现在想起来更妙的是：只需切换隐藏菜单的一个类，然后使用jQuery的

toggleClass

函数即可

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

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