Question

我正在尝试构建一个弹出菜单菜单，在按钮单击和表单提交上刷新页面后保持打开状态。几秒钟后，页面刷新后，需要自动关闭弹出菜单。我正在使用jquery cookie和toggleClass。

我面临两个问题：

1）如何在x秒后删除该类 2）当我单击按钮两次时，菜单返回到隐藏的正常状态。

我拥有的是：

 <li class="cart-top">
   <ul>....</ul>
</li>


$(document).ready(function() {
  var cart_class = $.cookie('cart_class');
  if(cart_class) {
    $('.cart-top').attr('class', cart_class);
  }
});


$(".pp .addToCart").on("click", function(e){
  e.preventDefault();

  var $form = $(this).closest('form');
  var qty = $('.qty_input input').val();
  var variant = $('#product_configure_variants').val();

  $.ajax({
    type: $form.attr('method'),
    url: $form.attr('action')+variant+'/?quantity='+qty,
    data: $form.serialize(),
    success: function(data, status){
      if(status == 'success'){

       // refresh the page
       setTimeout(function(){
          location.reload();
        },200);

        // add class back to the menu
        $(".cart-top").toggleClass("hover");
        $.cookie('cart_class', $('.cart-top').attr('class'));

        // remove the class after 2 seconds
        setTimeout(function(){
          $('.cart-top').removeClass('hover');
        },2000);
      }
    }
  });
  return false;
});

除了两次使用setTimeout之外，我真的看不出我做错了什么。我已经阅读了很多关于此的帖子，但没有一个真正处理某种相同的问题。

任何帮助都非常感谢！

使用cookie在超时后切换类

0 个答案: