Question

除了一个问题，我差不多完成了我最近的项目。

我有一个最小化的购物车，标准位置固定在右上方。单击时，将显示表单，其中显示了购物篮中的产品。再次单击时，它会被最小化。很标准的东西。以下是切换效果的代码：

  $('.widget #close').toggle(function() {
        $(".widget form").slideDown(400); 
        $('.widget').animate({width: 300}, 400);
        $(this).addClass("mini") 
  }, function() {
        $(this).removeClass("mini") 
        $('.widget').animate({width: 110}, 400);
        $(".widget form").hide(400); 
  });

这完全没问题。我的问题是：在切换的表单中保存的内容是动态创建的。我的意思是，当你点击将产品添加到购物篮时，名称和数量将通过JavaScript（wordpress插件）添加到表单中。如果在添加产品时表单最小化，一切正常，但如果您打开购物车以显示内容，那么您添加产品以更新显示整个表单消失的内容（我假设它失去了创建宽度和高度）。然后，您必须最小化并再次最大化以查看内容。

您可以在现场演示中看到此示例 - http://intelligentstudios.co.uk/superior/#products如果您添加产品，请打开右上角的购物车，一切正常。打开购物车，然后添加另一个产品，您将看到问题。

非常感谢帮助。

我的一个想法是在购买按钮上添加一个事件，最大限度地减少购物车。这会打破切换效果，因为您必须单击两次才能使购物车最大化。

Answer 1

我没有在您的JavaScript文件中看到更新购物车框的代码，但您可以在click元素上触发#close来关闭并打开购物车框这将正确更新视图：

变化：

$("#products form input[type=submit]").click(function(){
    $(".updated").show().animate({opacity: 1.0}, 1000).fadeOut(500);
});

要：

$("#products form input[type=submit]").click(function(){
    $(".updated").show().animate({opacity: 1.0}, 1000).fadeOut(500);
    $('#close').trigger('click');
    setTimeout(function () {
        $('#close').trigger('click');
    }, 500);
});

要对此进行测试，您只需通过Firebug的控制台将我的代码添加到页面中。

<强>更新

因此，如果您查看FireBug中的购物车框，您可以看到通过AJAX添加的表单是隐藏的，因此如果您添加代码来显示它，您应该得到预期的行为：

function load_cart(values){
    $("#wpchkt_widget").load(wpchkt_c_url, values,function(){
        $(".preload_img").hide();
        $("#wpchkt_widget .update_cart").hide();
        buttons_events();                
    });
}

jQuery动态内容在更新时消失/折叠（丢失高度和宽度）

1 个答案: