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

尝试获取移动页脚菜单（＃mobile-menu）以在点击或点击浮动按钮时隐藏/显示。我可以将click事件处理程序添加到按钮（＃mobile-footer-btn）中，该按钮轮流将该类应用于菜单并将其移出屏幕。jQuery在按钮上添加/删除类以隐藏元素

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

任何帮助将不胜感激！

来源

2016-01-20 plloyd

您只需点击一次活动！您的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

更妙的是，现在，我想它：只需拨动一类是隐藏菜单，只是使用jQuery的toggleClass功能。类似这样的：

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

来源

2016-01-20 19:14:43 DataHerder

问题在于您的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'); 
    }); 

});

来源

2016-01-20 19:09:30 nikhil

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

来源

2016-01-20 19:10:09

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

回答

相关问题