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

除了一个问题，我几乎完成了我最近的项目

我有一个购物车，这是最小化的标准和位置固定在右上角。单击后，将显示表格，其中显示篮子中的产品。再次单击时，它将最小化。相当标准的东西。以下是切换效果的代码：

  $('.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插件添加到表单中。如果在添加产品时表单最小化，则一切正常，但如果打开购物车以显示内容，则添加产品以更新显示的内容整个表单消失，我假设它失去了创建的宽度和高度。然后，您必须再次最小化和最大化以查看内容

你可以在现场演示中看到一个例子——如果你添加了一个产品，打开右上角的购物车，一切正常。保持购物车打开，然后添加其他产品，您将看到问题

非常感谢您的帮助

---

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

我在JavaScript文件中没有看到更新购物车框的代码，但您可以触发单击close元素以关闭和打开购物车框，从而正确更新视图：

更改：

$("#products form input[type=submit]").click(function(){
    $(".updated").show().animate({opacity: 1.0}, 1000).fadeOut(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();                
    });
}

---

这是添加内容的javascript，我相信，它会测试您的建议。感谢代码很棒，唯一的问题是当您在购物车最小化的情况下添加产品时会产生不安的效果。我会看一看，看我是否能解决这个问题。我确实喜欢购物车打开和关闭的事实，只是它并不平滑。@Michael在.trigger'click'周围添加一个if/then语句可能会否定额外的动画：if$'close'.hasClass'mini'{$'close'.trigger…}谢谢您的帮助。我同意if的说法。也将尝试使用您发布的其他更新代码。

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