javascript - jQuery 添加/删除按钮上的类以隐藏元素

Question

尝试获取移动页脚菜单(#mobile-menu)，以在单击或点击 float 按钮时隐藏/显示。我可以将点击事件处理程序添加到按钮 (#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>

无论出于何种原因，我无法删除该类并将新类添加到同一 ID，这将添加一个类以再次显示菜单。

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

您只需要一个点击事件!您的 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");
        }
    });
});

这是骗子:https://plnkr.co/edit/SG8eFns91wV4adxapFDB

现在我想了想，更好的是:只需切换隐藏菜单的一个类，然后使用 jQuery 的 toggleClass 函数即可。像这样的事情:

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