Question

我正在使用JQuery制作一个“Read More”按钮。当有人点击按钮时会出现一个弹出窗口。这个弹出窗口实际上是一个隐藏的div。我的问题是，当我单击按钮时，我希望div从按钮出现，当我单击弹出窗口上的十字标记时，它应该返回到它所源自的相同按钮，但是我得到的结果是，当我点击了div出现的按钮，而当我点击它时，它会转到'read more'按钮，我点击了第一个按钮。请帮我解决这个问题。我想我的代码中有一个小故障。我把它放在小提琴上http://jsfiddle.net/shivkumarganesh/qLEbD/

Answer 1

检查这个小提琴：http://jsfiddle.net/6uLF7/

问题在于存储目标左侧和顶部偏移的变量的局部范围。

<强>更改

在顶部添加了2个声明：

var readMoreInfoTop = 0;
var readMoreInfoLeft = 0;

从var处理程序中的top和left分配中删除了click个关键字

readMoreInfoTop = readMoreOffset.top + 10;
readMoreInfoLeft = readMoreOffset.left + 10;

Answer 2

每次打开按钮时，都会向关闭按钮添加另一个侦听器。您可以在重新绑定之前取消绑定关闭侦听器，例如。 http://jsfiddle.net/qLEbD/54/

或更好......

绑定关闭侦听器一次（在按钮单击功能之外）并将左侧位置存储在按钮单击上，例如。

//doc ready...
function() {

  var leftPosition;

  $('.button').click(function() {
    //animate popup to open
    leftPosition = $(this).offset.left;
  });

  $('#close').click(function() {
    //animate popup to close using leftPosition
  });
}();

如何使用JQuery修复此动画？

2 个答案: