Question

使用下面的代码我正在显示弹出窗口。我使用了toggle()动画方法。但它只显示弹出窗口一次。是什么原因？我该如何解决这个问题？

代码：

$(document).ready(function()
 {
      $(".ishow").click(function()
      {
           var info=$(this).attr("id");
           var id=info.replace("/","");

           var cor=$(".rd"+id).offset();
           var x=cor.left;
           var y=cor.top;

           $.ajax
           ({
                type:"post",
                url:"roomstaypopup.php",
                data:"id="+info,
                success: function(html)
                {                          
                     $("#popup"+id).css({"display":"block","left":x-51,"top":y+18});
                     $("#popup"+id).toggle();
                     $("#popup"+id).html(html);
                }
           });

      });
 })

Answer 1

您正在将样式设置为“显示”：.toggle()之前的“阻止”意味着.toggle()将始终隐藏元素。

尝试删除"display":"block",。除非您添加.toggle()之类的持续时间，否则.toggle(500);也不会设置动画。但出于您的目的，我认为您可能希望使用.show();代替.toggle(500);，并在致电$("#popup"+id).html(html);或show();之前添加toggle();以确保html在动画开始之前插入。

Answer 2

我非常确定切换最终会修改display css属性。你确定#popup + id的.css设置没有干扰切换吗？

Toggle应该首先显示它，然后在下一次隐藏它。但是，如果你在触发toggle（）之前用CSS显示它，它可能每次都会关闭它。

尝试注释掉上面的行toggle（）。无论如何，这是我的猜测。

Answer 3

切换按照您的说法工作，因为它只是根据可见性显示或隐藏元素。在你的情况下，你在一个带有display = block的元素上调用它，它应该总是将它显示为none，从而隐藏它

为什么toggle（）方法在我的程序中无法正常工作？

3 个答案: